完成本教程，您将可以轻松，快速，真正地用JavaScript创建引人注目的交互式烛台图。
AnyChart是基于JavaScript (HTML5) 的图表控件。使用AnyChart控件，可创建跨浏览器和跨平台的交互式图表和仪表。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文件
有许多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="https://cdn.anychart.com/releases/8.7.1/js/anychart-core.min.js" type="text/javascript"></script> <script src="https://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正版授权的朋友可以咨询官方客服
标签：
声明：本站部分文章及图片源自用户投稿，如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢！