跨平台图表控件Anychart教程:通过四个简单步骤制作JS烛台图(上)

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

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

# 您正在找协同办公软件吗?点击这里站长给您推荐 #

相关链接:

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

点击下载Anychart最新试用版

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

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

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

如何创建JavaScript烛台图

  1. 创建将在其中显示图表的HTML页面。
  2. 包括所有必需的JavaScript文件。
  3. 准备要可视化的数据。
  4. 编写图表的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="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正版授权的朋友可以咨询慧都官方客服

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

跨平台图表控件Anychart教程:通过四个简单步骤制作JS烛台图(上)



标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,尊重他人劳动成果

文章转载自:Anychart https://www.anychart.com/blog/2020/03/25/js-candlestick-chart-steps/#more-9923

登录 慧都网发表评论


暂无评论...

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
title
相关厂商
相关产品
AnyChart

灵活的高度可定制的跨浏览器、跨平台JavaScript (HTML5) 图表控件。

在线
客服
咨询
电话
400-700-1020
在线
QQ
购物车 反馈 返回
顶部
在线客服系统
live chat