日韩在线视频一区,国产无码三级在线视频,粉嫩av一区二区三区

跨平臺(tái)圖表控件Anychart教程：通過四個(gè)簡(jiǎn)單步驟制作JS燭臺(tái)圖（上）

翻譯|使用教程|編輯：吳園園|2020-03-31 10:42:46.180|閱讀 228 次

概述：完成本教程，您將可以輕松，快速，真正地用JavaScript創(chuàng)建引人注目的交互式燭臺(tái)圖。

相關(guān)鏈接：

AnyChart是基于JavaScript (HTML5) 的圖表控件。使用AnyChart控件，可創(chuàng)建跨瀏覽器和跨平臺(tái)的交互式圖表和儀表。AnyChart 圖表目前已被很多知名大公司所使用，可用于儀表盤、報(bào)表、數(shù)據(jù)分析、統(tǒng)計(jì)學(xué)、金融等領(lǐng)域。重要推薦：

點(diǎn)擊下載Anychart最新試用版

您是否有交易數(shù)據(jù)，正在尋找一種方法來對(duì)您的網(wǎng)站或應(yīng)用程序項(xiàng)目進(jìn)行有效可視化？如果是這樣，JS ;燭臺(tái)圖表可能是您的最佳選擇。本教程將把創(chuàng)建此類圖表所需的過程分解為簡(jiǎn)單的步驟，并提供有關(guān)代碼的詳細(xì)說明。即使您是編程新手，也請(qǐng)繼續(xù)閱讀，因?yàn)閮H需基本了解即可掌握和掌握此類基于JavaScript（HTML5）的數(shù)據(jù)可視化技術(shù)。

也稱為日本燭臺(tái)圖，此圖類型是財(cái)務(wù)和股票數(shù)據(jù)可視化的最受歡迎形式之一。每個(gè)燭臺(tái)代表有關(guān)當(dāng)天開盤價(jià)，最高價(jià)，最低價(jià)和收盤價(jià)的信息。燭臺(tái)圖廣泛用于價(jià)格走勢(shì)模式的技術(shù)分析。

完成本教程，您將可以輕松，快速，真正地用JavaScript創(chuàng)建引人注目的交互式燭臺(tái)圖。

如何創(chuàng)建JavaScript燭臺(tái)圖

創(chuàng)建將在其中顯示圖表的HTML頁(yè)面。
包括所有必需的JavaScript文件。
準(zhǔn)備要可視化的數(shù)據(jù)。
編寫圖表的JS代碼。

當(dāng)涉及到JavaScript圖表時(shí)，通常需要四個(gè)基本步驟來使幾乎任何類型的數(shù)據(jù)可視化：

本教程包括四個(gè)JS燭臺(tái)圖表示例。這是最后一個(gè)的外觀：

現(xiàn)在，將詳細(xì)解釋每個(gè)步驟。

步驟1：建立HTML網(wǎng)頁(yè)

首先，您需要?jiǎng)?chuàng)建一個(gè)基本的HTML頁(yè)面。包括相關(guān)標(biāo)題和HTML塊元素（例如div）以放置圖表。在這里，所使用的id的值是，container. 但請(qǐng)隨意使用對(duì)您有意義的任何東西。

該頁(yè)面應(yīng)如下所示：

<!DOCTYPE html>
<html>

<head>
  <title>JavaScript Candlestick Chart</title>
  <style>
    html,
    body,
    #container {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
    }
  </style>
</head>

<body>
  <div id="container"></div>
</body>

</html>

請(qǐng)注意，您可以在塊內(nèi)指定width和height參數(shù)，<style>以修改圖表將占用的空間。我輸入100% 了兩個(gè)參數(shù)，因此圖表將填滿整個(gè)頁(yè)面。

步驟2.包含所有必要的JS文件

其次，在本<head>節(jié)中引用所有必需的腳本文件。

有許多JavaScript圖表庫(kù)具有現(xiàn)成的功能，當(dāng)您想要快速創(chuàng)建可視化效果（有時(shí)甚至是復(fù)雜的可視化效果）時(shí)，這些功能非常有用，否則它們將需要高級(jí)編碼經(jīng)驗(yàn)。

在本教程中，我將使用AnyChart，更準(zhǔn)確地說，將使用AnyChart的AnyStock JS庫(kù)，該庫(kù)專門用于可視化基于日期和時(shí)間的圖表的大型數(shù)據(jù)集，包括（但實(shí)際上不限于）股票圖表。

您可以從引用必要的腳本CDN 或下載他們?cè)诒镜厥褂?。

讓我們使用CDN鏈接。對(duì)于備用燭臺(tái)，您需要同時(shí)使用anychart-core.min.js和anychart-stock.min.js腳本。這是HTML代碼中的外觀：

<!DOCTYPE html>
<html>

<head>
  <title>JavaScript Candlestick Chart</title>
  <script src="http://cdn.anychart.com/releases/8.7.1/js/anychart-core.min.js" type="text/javascript"></script>
  <script src="http://cdn.anychart.com/releases/8.7.1/js/anychart-stock.min.js" type="text/javascript"></script>
  <style>
    html,
    body,
    #container {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
    }
  </style>
</head>

<body>
  <div id="container"></div>
  <script>
    // The candlestick code will be written here
  </script>
</body>

</html>

請(qǐng)注意，script該<body> 部分中有一個(gè)標(biāo)簽

=====================================================

想要購(gòu)買Anychart正版授權(quán)的朋友可以

更多精彩內(nèi)容，歡迎關(guān)注下方的微信公眾號(hào)，及時(shí)獲取產(chǎn)品最新資訊▼▼▼