`
huang_xiaok
  • 浏览: 97155 次
  • 性别: Icon_minigender_1
  • 来自: 成都
博客专栏
90a30fc4-e2b0-37bf-a450-86cdba0caacc
Fusioncharts中...
浏览量:17272
文章分类
社区版块
存档分类

AnyStock快速启动教程

阅读更多

AnyStock是一款基于XML/JSON的Flash金融图表解决方案,能将实时数据转换为具有交互功能的精细图表,使你的数据直观地展现在Web页面上。 AnyStock能用于展示基于数据和时间的信息,是用于客户报表以及基于绩效报表应用程序的理想工具。本教程将手把手教你如何快速启动AnyStock图表。

< AnyStock最新版本下载>

1.把AnyStock列入到你的网页

将JavaScript文件列入到网页的<head>部分代码如下图所示:

< head>
    < script src="//cdn.anychart.com/js/latest/anystock.min.js" type="text/javascript">< /script>
< /head>

2.为图表创建容器

添加一个基于块的HTML元素到你的网页,设置id,width和height属性。 如果没有指定其他行为,AnyChart使用容器的100%。示例:

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

3.准备数据

当你使用其它图表,你可以使用anychart.data.set()来设置数据。当使用AnyStock时方法就多了(可以设置日期对象或数组,CSV,JSON以及XML),你需要使用anychart.data.table()和.addData()。

table = anychart.data.table();
  table.addData([
        ['2015-12-24T12:00:00','511.53', '514.98', '505.79', '506.40'],
        ['2015-12-25T12:00:00','512.53', '514.88', '505.69', '505.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','508.90', '516.24', '505.73', '510.40']  
  ]);

我们也许会使用引号,因为我们的数据是除了dateTime以外的数值,定义方法如下:

[Date.UTC(2015, 12, 24, 12, 00, 00), 511.53, 514.98, 505.79, 506.40],

你也可以将数据设置为无格式 - 即作为一个timestamp字符串。
数据设置完成之后,我们需要使用.mapAs()和.addField()方法来映射它。我们需要定义设置那个值,然后是该值本身和汇总类型。

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');

我们使用.stock()来启动AnyStock图表:

chart = anychart.stock();

由于股票图表拥有许多小块和系列,并且图表本身不能创建系列。因此这意味着你需要定义.plot():

chart.plot(0).ohlc(mapping);

无论你创建了多少小块,有列或没有列,它们都在一起滚动显示,因为它们被绑定到了同一个X轴。

4.创建图表

将下面的代码加上JavaScript的< script>标签添加到页面的任何地方。此代码示例使用JavaScript API来创建图表,但你也可以使用JSON,XML以及CSV。示例:

< script>
 
var table, mapping, chart;
anychart.onDocumentReady(function() {
 
  table = anychart.data.table();
  table.addData([
        ['2015-12-24T12:00:00','511.53', '514.98', '505.79', '506.40'],
        ['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','508.90', '516.24', '505.73', '510.40']  
  ]);
   
  // 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 Basic Sample');
   
  chart.container('container');
  chart.draw();
});
 
< /script>

运行结果如下:

运行结果
1
1
分享到:
评论

相关推荐

    AnyStock试用版:基于XMLJSON的Flash金融图表解决方案

    AnyStock(JavaScript) 试用版 试用版 开发语言: JavaScript 可用平台: ASP/ASP.NET/JSP/PHP 当前版本: v7.11 是一款金融图表解决方案,转换你的实时数据为具有交互功能的顶级图表,使你的数据直观地展现在Web页面...

    AnyChart.zip

    这个压缩包提供了多种类型的图表和地图工具,包括AnyChart、AnyStock、Anymap和AnyGantt,这些工具都是构建高效、交互式和引人入胜的数据展示解决方案的关键。 首先,让我们来看AnyChart,这是一个JavaScript库,...

    big-data-speed-test

    AnyStock大数据速度测试我们JavaScript图表支持以毫秒为单位渲染数千个数据点。 运行速度测试或尝试实时实时数据流传输。修改源代码可以两种方式修改演示源代码,而。 请确保在运行之前已安装所有。 然后,要使用...

    AnyChartStock无水印破解版

    AnyChartStock 1.9.0无水印破解版

    JEDEC SPEC 最新版 合集 DDR2/DDR3/DDR4/DDR5/LPDDR2/LPDDR3/LPDDR4(X)/LPDDR5(X)

    JESD79-2F DDR2 JESD79-3F DDR3 JESD79-4D DDR4 JESD79-5C DDR5 JESD209-2F LPDDR2 JESD209-3C LPDDR3 JESD209-4E LPDDR4 JESD209-4-1A LPDDR4X JESD209-5C LPDDR5(X)

    COMSOL二维光子晶体角态研究:单胞与超胞能带计算及边界态与角态特性分析,COMSOL二维光子晶体角态研究:单胞与超胞能带计算及边界态与角态特性分析,comsol二维光子晶体角态 单胞能带,超胞能

    COMSOL二维光子晶体角态研究:单胞与超胞能带计算及边界态与角态特性分析,COMSOL二维光子晶体角态研究:单胞与超胞能带计算及边界态与角态特性分析,comsol二维光子晶体角态。 单胞能带,超胞能带,边界态以及角态计算。 ,comsol;二维光子晶体;角态;单胞能带;超胞能带;边界态计算,基于Comsol的二维光子晶体角态及能带边界计算研究

    六自由度机械臂抓取动作仿真与代码解析:抓取动画、关节参数变化及轨迹图解详解,六自由度机械臂抓取动作仿真指南:掌握两套代码实现动画与轨迹图模拟学习攻略,六自由度机械臂抓取动作仿真-8 两套关于抓取动作的

    六自由度机械臂抓取动作仿真与代码解析:抓取动画、关节参数变化及轨迹图解详解,六自由度机械臂抓取动作仿真指南:掌握两套代码实现动画与轨迹图模拟学习攻略,六自由度机械臂抓取动作仿真-8 两套关于抓取动作的代码,包括抓取动画、关节角、角速度、角加速度的变化仿真、以及抓取轨迹图 简单易懂好上手~ ,六自由度机械臂;抓取动作仿真;抓取动画;关节角变化;角速度角加速度;抓取轨迹图;两套代码;简单易懂好上手,六自由度机械臂抓取动作仿真演示:代码与轨迹图解

    ITC网络广播工具软件

    ITC网络广播工具软件

    Multisim四位密码锁电路仿真设计:设定、开锁与声光报警功能演示资料包,Multisim四位密码锁电路仿真设计:设定、输入、开锁与报警功能详解,附源文件、原理说明书与演示视频,multisim四位

    Multisim四位密码锁电路仿真设计:设定、开锁与声光报警功能演示资料包,Multisim四位密码锁电路仿真设计:设定、输入、开锁与报警功能详解,附源文件、原理说明书与演示视频,multisim四位密码锁电路仿真设计 功能: 1.通过拨码开关1进行初始密码设定。 2.通过拨码开关2输入密码,实现开锁判断。 3.如果密码正确,LED绿灯亮,表示开锁。 4.如果密码不正确,LED红灯亮,蜂鸣器鸣叫,声光报警。 资料包含:仿真源文件+原理说明书+演示视频 ,四位密码锁电路、Multisim仿真设计、初始密码设定;拨码开关输入;开锁判断;LED灯显示;声光报警;仿真源文件;原理说明书;演示视频,Multisim四位密码锁电路仿真设计:初始密码设置与智能解锁功能的声光报警展示

    上班摸鱼打卡模拟器微信小程序源码.zip

    俗话说,摸鱼摸的好,上班没烦恼,毕竟谁能拒绝带薪拉屎呢(手动狗头) 这是一个云开发职场打工人专属上班摸鱼划水微信小程序源码,没有后台 直接导入微信开发者工具即可运行,UI简约大气漂亮,只需登录微信公众平台配置完合法域名即可轻松上线。 用户进入摸鱼小程序,可以自由设置薪资,上班时间、下班时间、发薪日、 月工作天数以提醒自己摸鱼,全民打酱油,让自己成为摸鱼冠军,《商鞅摸鱼哲学》 摸鱼不是自我放纵,而是个人实力的积蓄,我们的小目标是晚睡晚起 小程序中的今日待办会提醒用户带薪拉屎和闲逛,下方展示的是距离休息日的天数,距离下一次发工资的天数和节日的天数。

    【毕业设计】基于Java的开发的一个集合校园二手交易、拼车、失物招领等功能的app_pgj.zip

    【毕业设计】基于Java的开发的一个集合校园二手交易、拼车、失物招领等功能的app_pgj

    PICkit3离线烧录流程

    个人记录:PICkit3离线烧录流程 使用软件:MPLAB X IDE v5.30 记录时间:20250215

    基于Matlab代码的电力系统状态估计与实验仿真研究:扩展卡尔曼滤波和无迹卡尔曼滤波在电力系统动态状态估计中的应用及效果分析,Matlab仿真实验研究:基于扩展卡尔曼滤波器与无迹卡尔曼滤波器对电力系统

    基于Matlab代码的电力系统状态估计与实验仿真研究:扩展卡尔曼滤波和无迹卡尔曼滤波在电力系统动态状态估计中的应用及效果分析,Matlab仿真实验研究:基于扩展卡尔曼滤波器与无迹卡尔曼滤波器对电力系统状态估计的影响及验证,状态估计 电力系统状态估计 Matlab代码 实验仿真研究 电力系统由于测量值和传输误差,还有测量噪声的影响,会对状态估计产生影响。 因此,需要对嘈杂的测量进行滤波,以获得准确的电力系统运行动态。 本文使用扩展卡尔曼滤波器(EKF)和无迹卡尔曼滤波器(UKF)来估计电力系统的动态状态。 扩展卡尔曼滤波EKF、无迹卡尔曼滤波UKF 利用扩展的无迹卡尔曼滤波器估计了动力系统的动态状态。 对WECC 3机9总线系统和新英格兰10机39总线系统进行了案例研究。 结果表明EKF和UKF都能准确地估计电力系统的动态状态。 ,核心关键词:状态估计; 电力系统状态估计; Matlab代码; 实验仿真; 测量值误差; 测量噪声; 扩展卡尔曼滤波器(EKF); 无迹卡尔曼滤波器(UKF); 动力系统; 动态状态估计; WECC 3机9总线系统; 新英格兰10机39总线系统。,Matlab

    springboot在线考试--.zip

    springboot在线考试--

    台达DVP EH3与MS300 PLC&变频器通讯程序的全面解决方案,台达DVP EH3与MS300通讯程序:稳定可靠的频率控制与启停管理系统,台达DVP EH3与台达MS300通讯程序(TDEH-9

    台达DVP EH3与MS300 PLC&变频器通讯程序的全面解决方案,台达DVP EH3与MS300通讯程序:稳定可靠的频率控制与启停管理系统,台达DVP EH3与台达MS300通讯程序(TDEH-9) 可直接用于实际的程序,程序带注释,并附送触摸屏程序,有接线方式和设置,通讯地址说明等。 程序采用轮询,可靠稳定 器件:台达DVP EH3系列PLC,台达MS300系列变频器,昆仑通态7022Ni 功能:实现频率设定,启停控制,实际频率读取,加减速时间设定。 资料:带注释程序,触摸屏程序,接线和设置说明,后续有技术咨询。 ,核心关键词:台达DVP EH3; 台达MS300; 通讯程序(TDEH-9); 轮询; 稳定; 频率设定; 启停控制; 实际频率读取; 加减速时间设定; 触摸屏程序; 接线方式; 设置说明; 技术咨询。,台达PLC与变频器通讯程序(带注释、触摸屏控制)

    【python毕设】p100基于Pytorch+springboot+vue的声纹识别系统.zip

    项目资源包含:可运行源码+sql文件 适用人群:学习不同技术领域的小白或进阶学习者;可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。项目具有较高的学习借鉴价值,也可拿来修改、二次开发。 个人账户管理:支持用户注册、登录与个人信息编辑;提供密码找回及账号安全保护措施。 声纹采集:利用麦克风设备录制用户的声纹样本;支持多种录音格式和质量调整,确保采集到清晰、准确的声纹数据。 声纹模板库管理:建立和维护一个安全的声纹模板库;支持声纹模板的添加、删除、更新和查询操作。 声纹比对与识别:运用深度学习算法对输入的声纹数据进行特征提取和匹配;实现快速、准确的声纹身份验证。 多场景应用支持:适用于多种场景,如门禁系统、移动支付、远程登录等;可根据实际需求定制开发相应的应用场景。 实时监控与报警:实时监控系统运行状态,包括声纹识别成功率、处理速度等指标;当出现异常情况时,及时发出报警信息。 数据分析与报告生成:收集并分析声纹识别过程中的数据,如识别准确率、处理时间等;根据用户需求输出包含详细图表说明的专业级文档供下载打印保存。 社区互动交流:设立论坛版块鼓励用户分享心得体会讨论热点话题;定期邀请行业专家举办线上讲座传授实用技巧知识。 音乐筛选与推荐:集成音乐平台API,根据用户的浏览习惯和情绪状态推荐背景音乐,增强用户体验。 数据可视化:提供交互式的数据可视化面板,使非技术用户也能轻松理解复杂的数据集,从而做出更明智的决策。

    三相与多相开绕组永磁同步电机仿真模型的先进控制策略探讨与实现,三相与多相开绕组永磁同步电机的Simulink仿真模型与先进控制策略研究,开绕组电机,开绕组永磁同步电机仿真模型、simulink仿真 共

    三相与多相开绕组永磁同步电机仿真模型的先进控制策略探讨与实现,三相与多相开绕组永磁同步电机的Simulink仿真模型与先进控制策略研究,开绕组电机,开绕组永磁同步电机仿真模型、simulink仿真 共直流母线、独立直流母线,两相容错,三相容错控制,零序电流抑制,控制策略很多 三相开绕组永磁同步电机,六相开绕组永磁同步电机 五相开绕组永磁同步电机,五相开绕组电机 ,开绕组电机; 永磁同步电机仿真模型; simulink仿真; 共直流母线; 独立直流母线; 两相容错; 三相容错控制; 零序电流抑制; 控制策略; 六相开绕组永磁同步电机; 五相开绕组永磁同步电机,开绕组电机仿真研究:共直流母线与独立直流母线的容错控制策略

    【毕业设计】基于Java的开发的网上汽车租赁管理系统_pgj.zip

    【毕业设计】基于Java的开发的网上汽车租赁管理系统_pgj

    python打开csv文件

    csv 模块是 Python 的标准库,无需额外安装。 运行结果如下图: ['姓名', '年龄', '城市'] ['张三', '25', '北京'] ['李四', '30', '上海'] ['王五', '22', '广州']

    【毕业设计】基于Java+Springboot+Vue的宠物领养系统_pgj.zip

    【毕业设计】基于Java+Springboot+Vue的宠物领养系统_pgj

Global site tag (gtag.js) - Google Analytics