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

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

翻译|使用教程|编辑：吴园园|2020-03-31 10:42:46.180|阅读 178 次

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

相关链接：

AnyChart是基于JavaScript (HTML5) 的图表控件。使用AnyChart控件，可创建跨浏览器和跨平台的交互式图表和仪表。AnyChart 图表目前已被很多知名大公司所使用，可用于仪表盘、报表、数据分析、统计学、金融等领域。重要推荐：

点击下载Anychart最新试用版

您是否有交易数据，正在寻找一种方法来对您的网站或应用程序项目进行有效可视化？如果是这样，JS 烛台图表可能是您的最佳选择。本教程将把创建此类图表所需的过程分解为简单的步骤，并提供有关代码的详细说明。即使您是编程新手，也请继续阅读，因为仅需基本了解即可掌握和掌握此类基于JavaScript（HTML5）的数据可视化技术。

也称为日本烛台图，此图类型是财务和股票数据可视化的最受欢迎形式之一。每个烛台代表有关当天开盘价，最高价，最低价和收盘价的信息。烛台图广泛用于价格走势模式的技术分析。

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

如何创建JavaScript烛台图

创建将在其中显示图表的HTML页面。
包括所有必需的JavaScript文件。
准备要可视化的数据。
编写图表的JS代码。

当涉及到JavaScript图表时，通常需要四个基本步骤来使几乎任何类型的数据可视化：

本教程包括四个JS烛台图表示例。这是最后一个的外观：

现在，将详细解释每个步骤。

步骤1：建立HTML网页

首先，您需要创建一个基本的HTML页面。包括相关标题和HTML块元素（例如div）以放置图表。在这里，所使用的id的值是，container. 但请随意使用对您有意义的任何东西。

该页面应如下所示：

<!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>

请注意，您可以在块内指定width和height参数，<style>以修改图表将占用的空间。我输入100% 了两个参数，因此图表将填满整个页面。

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

其次，在本<head>节中引用所有必需的脚本文件。

有许多JavaScript图表库具有现成的功能，当您想要快速创建可视化效果（有时甚至是复杂的可视化效果）时，这些功能非常有用，否则它们将需要高级编码经验。

在本教程中，我将使用AnyChart，更准确地说，将使用AnyChart的AnyStock JS库，该库专门用于可视化基于日期和时间的图表的大型数据集，包括（但实际上不限于）股票图表。

您可以从引用必要的脚本CDN  或下载  他们在本地使用。

让我们使用CDN链接。对于备用烛台，您需要同时使用anychart-core.min.js和anychart-stock.min.js脚本。这是HTML代码中的外观：

<!DOCTYPE html>
<html>

<head>
  <title>JavaScript Candlestick Chart</title>
  <script src="//cdn.anychart.com/releases/8.7.1/js/anychart-core.min.js" type="text/javascript"></script>
  <script src="//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>

请注意，script该<;body> 部分中有一个标签

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

想要购买Anychart正版授权的朋友可以

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