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

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

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

Anychart最新试用版

步骤3：准备资料

加载数据

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

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

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中的第一个交互式烛台图表！

在生成的JS烛台图表中，可以观察到EUR / USD货币对在两年内的交易情况。如果需要，可以使用滚动条放大到较短的时间。悬停时会显示工具提示和十字线。仅使用默认设置，您将获得一个功能齐全的交互式图表，该图表可以很好地呈现金融分析师和交易员完成工作所需的所有基本信息。

顺便说一下，AnyChart拥有自己的在线编辑器，称为图表，地图和仪表板，用于数据可视化。

关于修改颜色和配置滚动条请关注后续教程~

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

想要购买Anychart正版授权的朋友可以咨询官方客服

更多精彩内容，欢迎关注下方的微信公众号，及时获取产品最新资讯▼▼▼

来源：慧都