跨平台图表控件Anychart教程：通过四个简单步骤制作JS烛台图（中）-控件新闻-慧都网

跨平台图表控件Anychart教程：通过四个简单步骤制作JS烛台图（中）

翻译|使用教程|编辑：吴园园|2020-04-01 13:39:27.623|阅读 258 次

概述：完成本教程，您将可以轻松，快速，真正地用JavaScript创建引人注目的交互式烛台图。

相关链接：

AnyChart是基于JavaScript (HTML5) 的图表控件。使用AnyChart控件，可创建跨浏览器和跨平台的交互式图表和仪表。AnyChart 图表目前已被很多知名大公司所使用，可用于仪表盘、报表、数据分析、统计学、金融等领域。重要推荐：AnyChart已加入在线订购，超值特惠限时抢购！咨询详情>>

点击下载Anychart最新试用版

步骤3：准备资料

加载数据

对于此烛台图，我选择可视化Investing.com的EUR / USD（欧元/美元）的历史数据，重点是两年的时间段，即2018年3月至2020年3月。由于数据集很大，而不是将数据直接插入.html文件中，为方便起见，我们将其放入CSV文件中。

这是一个示例来演示数据的外观：

跨平台图表控件Anychart教程：通过四个简单步骤制作JS烛台图（中）

AnyChart有一个称为“ Data Adapter"的模块，该模块允许开发人员以非常简单的方式加载CSV和其他文件格式。继续并在本节中引用此模块：

JavaScript Candlestick Chart

接下来，使用loadCsvFile()数据适配器提供的方法加载数据。然后创建一个数据表以将此数据应用于图表。代码实现如下所示：

anychart.data.loadCsvFile("https://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("https://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中的第一个交互式烛台图表！