AnyStock如何使用JavaScript创建金融图表

作者:控件中国网   出处:控件中国网   2015-10-13 09:57:58   阅读:30

AnyStock从7.7版本开始已经采用全新的JavaScript引擎了,不再支持Flash显示模式了,在新版本中可以完全实现跨平台和跨浏览器了,并且全面兼容HTML5,这篇文章主要介绍如何使用JavaScript快速创建一个金融类图表,具体如下:

1.首先下载AnyStock,并把控件提供的JS文件包含到WEB页面里

<head>

    <script src="//cdn.AnyChart.com/js/latest/AnyStock.min.js" type="text/javascript"></script> 

</head>

2.为图表创建一个容器,该容器可以设置ID、宽度和高度等。

<body>

    <div id="container" style="width: 500px; height: 400px;"></div>

</body>

3.为图表准备数据,使用AnyChart.data.table() 和 .addData()为图表添加数据

4.使用 .mapAs()和 .addField() 为图表字段匹配数据

5.完整代码可以参考下面:

<html>

<head>

    <meta charset="UTF-8"/>

    <script src="http://cdn.AnyChart.com/js/latest/AnyStock.min.js" type="text/javascript"></script> 

    <script>

var table, mapping, chart;

AnyChart.onDocumentReady(function() {

 

  table = AnyChart.data.table();

  table.addData([

['2015-12-24T12:00:00'],

['2015-12-25T12:00:00','512.53', '514.88', '505.69', '507.34'],

['2015-12-26T12:00:00','511.83', '514.98', '505.59', '506.23'],

['2015-12-27T12:00:00','511.22', '515.30', '505.49', '506.47'],

['2015-12-28T12:00:00','510.35', '515.72', '505.23', '505.80'],

['2015-12-29T12:00:00','510.53', '515.86', '505.38', '508.25'],

['2015-12-30T12:00:00','511.43', '515.98', '505.66', '507.45'],

['2015-12-31T12:00:00','511.50', '515.33', '505.99', '507.98'],

['2016-01-01T12:00:00','511.32', '514.29', '505.99', '506.37'],

['2016-01-02T12:00:00','511.70', '514.87', '506.18', '506.75'],

['2016-01-03T12:00:00','512.30', '514.78', '505.87', '508.67'],

['2016-01-04T12:00:00','512.50', '514.77', '505.83', '508.35'],

['2016-01-05T12:00:00','511.53', '516.18', '505.91', '509.42'],

['2016-01-06T12:00:00','511.13', '516.01', '506.00', '509.26'],

['2016-01-07T12:00:00','510.93', '516.07', '506.00', '510.99'],

['2016-01-08T12:00:00','510.88', '515.93', '505.22', '509.95'],

['2016-01-09T12:00:00','509.12', '515.97', '505.15', '510.12'],

['2016-01-10T12:00:00','508.53', '516.13', '505.66', '510.42'],

['2016-01-11T12:00:00']

  ]);

  

  // mapping the data

  mapping = table.mapAs();

  mapping.addField('open', 1, 'first');

  mapping.addField('high', 2, 'max');

  mapping.addField('low', 3, 'min');

  mapping.addField('close', 4, 'last');

  mapping.addField('value', 4, 'last');

 

  // defining the chart type

  chart = AnyChart.stock();

  

  // set the series type

  chart.plot(0).ohlc(mapping).name('ACME Corp.');

  

  // setting the chart title

  chart.title('AnyStock Demo');

  

  chart.container('container');

  chart.draw();

});

</script>

</head>

<body>

<div id="container" style="width: 100%; height: 100%"></div>

</body>

</html>

Copyright© 2006-2015 ComponentCN.com all rights reserved.重庆磐岩科技有限公司(控件中国网) 版权所有 渝ICP备12000264号 法律顾问:元炳律师事务所
客服软件
live chat