• FusionCharts制作实时刷新图


    转自:http://yklovejava-163-com.iteye.com/blog/1889949

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

      1. 网上没什么例子可以参考,官网有,先下载FusionChartsSuiteXTEval.大概有164M(下载速度比较慢,估计得1~2个小时).
         解压缩出来,主要关注以下几个目录:
         ▶ FusionChartsSuiteXTEvalFusionWidgets XTCharts下的swf文件.这里使用的是RealTimeLine.swf.
         ▶ FusionChartsSuiteXTEvalFusionWidgets XTCodeRealTime目录就是一些示例.
         ▶ FusionChartsSuiteXTEvalFusionWidgets XTContentsRealTime和FusionChartsSuiteXTEvalFusionWidgets XTContentsDataStreaming,主要是一些文档的参考.
     
      2. 先把官方的例子跑起来.
         官方只带了一个jsp的示例,我们将其配置到tomcat中.在server.xml中配置虚拟目录,指定到...FusionChartsSuiteXTEvalFusionWidgets 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稍作修改,简单点就改成了这样:
             
      效果如图:
                
      关于输出的数据格式的问题,可以参考FusionChartsSuiteXTEvalFusionWidgets XTContentsRealTime目录下的RealTimeDataFormat.html文件.
     
      3. 如何使用FusionCharts的js的API了来控制数据的改变.那就得参考FusionChartsSuiteXTEvalFusionWidgets XTContentsDataStreaming目录下的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.
             
      然后双击那一行,就可以修改文字了,删除也行.
           
     效果如图: 
           
  • 相关阅读:
    php无限极分类
    HDU 1176 免费馅饼 (类似数字三角形的题,很经典,值得仔细理解的dp思维)
    HDU 1158(非常好的锻炼DP思维的题目,非常经典)
    HDU 1165 公式推导题
    HDU 1069 Monkey and Banana(转换成LIS,做法很值得学习)
    HDU 1059(多重背包加二进制优化)
    HDU 1058(打表)
    oracle11g之管理oracle数据库笔记(理论基础知识)
    oracle11g之Oracle体系结构(理论基础知识)
    HDU 1025 LIS二分优化
  • 原文地址:https://www.cnblogs.com/sdp-dream/p/3227005.html
Copyright © 2020-2023  润新知