FusionCharts制作实时刷新图

加菲学Java

浏览: 132562 次
性别:
来自: 扬州

最近访客更多访客>>

dengjunfen

dh001

Coolieo

huaiao_chen

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

jsp Flash

前提说明：

  1. 最好不要用FusionCharts了,因为毕竟是付费产品,付费的话那肯定无可厚非.要是用破解版的话,而我们做这行的,这样做实在不是一件好事,不提倡.能不用就不要用了(不过实时图是没有破解版的,要通过去除水印的方式).

  2. 关于Highcharts,使用过程中发现对于时间坐标的控制实在太费事,把握不好.弃之.

  下面介绍的是用FusionCharts制作实时刷新图的过程(FusionCharts确实太好用了,~~o(>_<)o ~~).
  1. 网上没什么例子可以参考,官网有,先下载FusionChartsSuiteXTEval.大概有164M(下载速度比较慢,估计得1~2个小时).
     解压缩出来,主要关注以下几个目录：
     ▶ 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.
       
  然后双击那一行,就可以修改文字了,删除也行.
       
 效果如图： 
       
  最后还是得说下：这个要付费的!