AnyChart是基于JavaScript (HTML5) 的圖表控件。使用AnyChart控件，可創建跨瀏覽器和跨平臺的交互式圖表和儀表。AnyChart 圖表目前已被很多知名大公司所使用，可用于儀表盤、報表、數據分析、統計學、金融等領域。重要推薦：

點擊下載Anychart最新試用版

步驟3：準備資料

加載數據

對于此燭臺圖，我選擇可視化Investing.com的EUR / USD（歐元/美元）的歷史數據，重點是兩年的時間段，即2018年3月至2020年3月。由于數據集很大，而不是將數據直接插入.html文件中，為方便起見，我們將其放入CSV文件中。

這是一個示例來演示數據的外觀：

JavaScript Candlestick Chart

	

anychart.data.loadCsvFile("http://static.anychart.com/git-storage/word-press/data/candlestick-chart-tutorial/EUR_USDHistoricalData2year.csv", function (data) {
  
  var dataTable = anychart.data.table(0, 'MMM d, yyyy');
  dataTable.addData(data);

});

映射數據

現在已經加載了數據，讓我們使用該mapAs()函數將數據字段轉換為燭臺圖的字段。

我們需要五個數據字段：

• x，通常代表日期

• open，代表開始期間的價格

• high，代表此期間的最高價格

• low，代表此期間的最低價格，以及

• close，代表期末或收盤價

在CSV文件中，您看到的open是第二個字段， high第三個，low第四個和close第一個字段。所以這是你應該寫的：

var mapping = dataTable.mapAs({ 'open': 2, 'high': 3, 'low': 4, 'close': 1 });

步驟4：編寫JS燭臺圖表代碼

現在已經完成了所有設置，繼續進行圖表代碼本身。

所有編碼都將在<script>標簽內進行。需要添加的第一個功能是anychart.onDocumentReady。它將封裝所有代碼，并在頁面準備就緒時執行：

<script>
  anychart.onDocumentReady(function () {
    // The candlestick code will be written here
  });
</script>

所有編碼都將在 接下來，包括步驟3中的數據：

<script>
  anychart.onDocumentReady(function () {

    // load data
    anychart.data.loadCsvFile("http://static.anychart.com/git-storage/word-press/data/candlestick-chart-tutorial/EUR_USDHistoricalData2year.csv", function (data) {

      // create a data table
      var dataTable = anychart.data.table(0, 'MMM d, yyyy');
      dataTable.addData(data);

      // map data
      var mapping = dataTable.mapAs({ 'open': 2, 'high': 3, 'low': 4, 'close': 1 });

    });

  });
</script>

最后，使用anychart.stock()創建股票圖表并為它提供燭臺系列。然后，您可以指定適當的圖表標題，將圖表放入容器中，并命令繪制它。

您已經使用JavaScript制作了HTML5中的第一個交互式燭臺圖表！

在生成的JS燭臺圖表中，可以觀察到EUR / USD貨幣對在兩年內的交易情況。如果需要，可以使用滾動條放大到較短的時間。懸停時會顯示工具提示和十字線。僅使用默認設置，您將獲得一個功能齊全的交互式圖表，該圖表可以很好地呈現金融分析師和交易員完成工作所需的所有基本信息。

順便說一下，AnyChart擁有自己的在線編輯器，稱為圖表，地圖和儀表板，用于數據可視化。

關于修改顏色和配置滾動條請關注后續教程~

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

想要購買Anychart正版授權的朋友可以

更多精彩內容，歡迎關注下方的微信公眾號，及時獲取產品最新資訊▼▼▼