JavaScript金融类图表AnyStock如何设置复杂的数据呢

作者:控件中国网   出处:控件中国网   2015-10-15 10:28:57   阅读:13

在金融图表中涉及的数据是相当复杂,并且数据点众多,AnyStock从7.7以后已经是采用JavaScript了,对图表的操作以及设置完全使用JavaScript方法和函数来操作,AnyStock的数据源可以使用表格数据,控件提供了 mapAsTable() 函数来处理这些表格数据。
<a href=http://www.componentcn.com/kongjianchanpin/tubiao/jibentubiaokongjian/2014-09-15/158.html target=_blank class=infotextkey>AnyStock</a>.png
 
首先在准备好图表需要的数据后,首先需要使用下面的代码来创建一个表格,并且在创建表格时,需要指定到底是使用那一列数据来作为X轴的值,并不是说表格第一列就是X轴的值,所以必须为 .table()方法设置一个列索引,默认值是0.
 
table = AnyChart.data.table(2);
 
在创建好表格后,紧跟着需要对表格进行数据的填充了,AnyStock控件提供了.addData()来为表格填充相应的数据
table.addData([
    ['511.53', '514.98', '2015-12-24T12:00:00', '505.79', '506.40'],
    ['512.53', '514.88', '2015-12-25T12:00:00', '505.69', '505.34'],
    ['511.83', '514.98', '2015-12-26T12:00:00', '505.59', '506.23'],
    ['511.22', '515.30', '2015-12-27T12:00:00', '505.49', '506.47'],
    ['510.35', '515.72', '2015-12-28T12:00:00', '505.23', '505.80'],
    
]);
在表格数据填充完成以后,需要对图表中各个字段需要的数据进行一一的匹配,首先要用控件提供的 .mapAs()方法创建一个匹配对象,然后使用该对象的.addField()方法来逐一匹配字段,该方法至少需要2个变量,第一个是该字段的名字,第二个是该字段需要用到的数据在表格中的索引,而第三个变量主要用于设置分组类型等
 
mapping.addField('open', 1, 'first');
mapping.addField('high', 2, 'max');
 
当然添加完数据后,我们也可以通过控件提供的API对数据进行删除,控件提供了 .remove() 或 .removeFirst()函数来删除数据,其中.removeFirst()函数是删除从表格第一行开始到给出行的数据:
 
table.removeFirst(10);//表示删除表格中前十行数据
 
而.remove()方法则可以删除任何数据点或一定范围内的数据点,下面的代码表示删除一定范围内的数据点,如果仅是需要删除某一个点,则提供一个变量即可。
table.remove('2015-12-24T12:00:00', '2015-12-27T12:00:00'); 
 
Copyright© 2006-2015 ComponentCN.com all rights reserved.重庆磐岩科技有限公司(控件中国网) 版权所有 渝ICP备12000264号 法律顾问:元炳律师事务所
客服软件
live chat