FusionCharts实用技能之制作实时刷新图-控件新闻-慧都网

FusionCharts实用技能之制作实时刷新图

原创|使用教程|编辑：龚雪|2014-12-08 10:10:59.000|阅读 593 次

概述：下面介绍的是用FusionCharts制作实时刷新图的过程。

# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>

【年终大促巅峰盛慧】FusionCharts XT及套包<8折>！

下面介绍的是用FusionCharts制作实时刷新图的过程(FusionCharts确实太好用了,~~o(>_<)o ~~).

1. 网上没什么例子可以参考,官网有,先下载FusionChartsSuiteXTEval.大概有114M。

解压缩出来,主要关注以下几个目录：

▶ FusionChartsSuiteXTEval\FusionWidgets XT\Charts下的swf文件.这里使用的是RealTimeLine.swf.

▶ FusionChartsSuiteXTEval\FusionWidgets XT\Code\RealTime目录就是一些示例.

▶ FusionChartsSuiteXTEval\FusionWidgets XT\Contents\RealTime和FusionChartsSuiteXTEval\FusionWidgets XT\Contents\DataStreaming,主要是一些文档的参考.

2. 先把官方的例子跑起来.

官方只带了一个jsp的示例,我们将其配置到tomcat中.在server.xml中配置虚拟目录,指定到FusionChartsSuiteXTEval\FusionWidgets XT目录.

最简单的示例：SimpleExample.html、Data.xml.这里将Data.xml文件中的dataStreamURL改为StockPrice.jsp.看一下StockPrice.jsp文件,其实很简单,就是打印这样的数据格式：&label=12:23:45&value=23.

刚刚那个只有一条线,现在看一个怎么样有两条线的:MultipleDS.html、MultipleDS.xml,这里官方没有提供了jsp的例子.我们可以看下StockPriceGoogDell.asp文件.不会asp没关系,其实我们只要关注最后一行的输出：

把官方的提供的StockPrice.jsp稍作修改,简单点就改成了这样：

效果如图：

关于输出的数据格式的问题,可以参考FusionChartsSuiteXTEval\FusionWidgets XT\Contents\RealTime目录下的RealTimeDataFormat.html文件.

3. 如何使用FusionCharts的js的API了来控制数据的改变.那就得参考FusionChartsSuiteXTEval\FusionWidgets XT\Contents\DataStreaming目录下的JSAPI.html和JSFeed.html.

JSFeed.html提供了比较完整的例子：

其中最重要的两点就是：

(1) 获取chart的ID：var chartRef = FusionCharts("ChId1");

(2) 更新数据：chartRef.feedData(strData);

只要掌握了这两点,就可以做一些稍微复杂些的例子了,比如下图一个页面上同时有多个实时刷新图：

4. 从上面可以看到实时图是有水印的:

如何去掉这个水印呢?

这里用到了URL Action Editor6.0.打开RealTimeLine.swf文件,然后搜索Trial.

然后双击那一行,就可以修改文字了,删除也行.

效果如图：

From ITeye

狂欢继续！【年终大促巅峰盛"慧" 】促销火热进行中 iPhone 6 Plus、 iPhone 6、iPad Air满就送，还不赶快买买买！

标签：JavaScript HTML5 图表 FusionCharts FusionCharts图表

本站文章除注明转载外，均为本站原创或翻译。欢迎任何形式的转载，但请务必注明出处、不得修改原文相关链接，如果存在内容上的异议请邮件反馈至chenjj@pclwef.cn

文章转载自：慧都控件网

上一篇：dtSearch使用教程：文件缓存下一篇：UML基础学习及资源总结

彩票走势图

在线采购

中文文档库

试用/Demo下载

开发社群