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

下面介绍的是用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.
         
  然后双击那一行,就可以修改文字了,删除也行.
       
 效果如图: 
       

FusionCharts制作实时刷新图的更多相关文章

  1. C# 实时折线图,波形图

    此Demo是采用VS自带的Chart图表控件,制作实时动态显示的折线图,和波形图. 涉及到知识如下: Chart 控件,功能强大,可以绘制柱状图,折线图,波形图,饼状图,大大简化了对图的开发与定制. ...

  2. FusionCharts制作报表使用XML导入数据时出现的中文乱码问题

    今天在使用FusionCharts制作报表时用XML导入数据,总是出现乱码问题,下面是我的解决方案. 让FusionCharts支持中文 刚刚将XML导入到html中后,在火狐浏览器一直报Invali ...

  3. js获取当前时间并实时刷新

    效果如图: 代码如下: <html> <head> <title>js获取当前时间并实时刷新</title> <script> //页面加载 ...

  4. Vue+WebSocket 实现页面实时刷新长连接

    最近vue项目要做数据实时刷新,折线图每秒重画一次,数据每0.5秒刷新一次,说白了就是实时刷新,因为数据量较大,用定时器估计页面停留一会就会卡死... 与后台人员讨论过后决定使用h5新增的WebSoc ...

  5. echarts背景分割区域填充不同颜色(x轴为time),实时刷新

    先来看下图片吧,这是实现效果: 思路: 因为要实时刷新,可以使用setInterval(),但是要控制好定时器的起与停,否则容易错乱以及页面卡死: 主要就是利用定时器五秒刷新,重绘echarts图:= ...

  6. Unity3d中使用摄像机制作实时显示小地图

    Unity3d中使用摄像机制作实时显示小地图,以之前的tank为例.开始制作之前场景中物体如图. 开始制作,步骤1:新建一个camera及一个plane.对齐位置,将camera改名为camera_U ...

  7. Android TabHost切换选项卡实现数据实时刷新

    手机界面大小有限,使用TabHost可以达到在一个Activity中放入多个容器(界面)的效果.但存在一个问题是,当数据信息在一个容器(界面)中有所改变时,需要在用户切换选项卡到其他容器(界面)的时候 ...

  8. 用 grunt-contrib-connect 构建实时预览开发环境 实时刷新

    本文基本是参照着 用Grunt与livereload构建实时预览的开发环境 实操了一遍,直接实现能实时预览文件列表,内容页面.不用刷新页面了,这比以前开发网页程序都简单. 这里要用到的 Grunt 插 ...

  9. flask处理数据,页面实时刷新展示

    背景: 后端 flask(python)处理数据,页面实时刷新,类似于打包页面的动态展示,展示效果如图: 代码如下: 前端主要使用以下循环处理, 2--- 2秒刷新一次 {% if 0 == stop ...

随机推荐

  1. 为什么iterator,foreach遍历时不能进行remove操作?除了一种情况可以这样(特殊情况)?

    Exception in thread "main" java.util.ConcurrentModificationException 并发修改异常引发的思考! 1 foreac ...

  2. 20145312 实验二《 Java面向对象程序设计》

    20145312 实验二< Java面向对象程序设计> 实验内容 初步掌握单元测试和TDD 理解并掌握面向对象三要素:封装.继承.多态 初步掌握UML建模 熟悉S.O.L.I.D原则 了解 ...

  3. 20145324 《Java程序设计》第4周学习总结

    20145324 <Java程序设计>第4周学习总结 教材学习内容总结 第六章 1.继承是为避免多个类间重复定义共同行为 A extends B A继承B的行为 2.一个子类只能继承一个父 ...

  4. LeetCode (65):Same tree

    Total Accepted: 83663 Total Submissions: 200541 Difficulty: Easy Given two binary trees, write a fun ...

  5. Java Swing简单的加法器

    package test; import java.awt.*; import javax.swing.*; import java.awt.event.*; public class FrameDe ...

  6. CNN笔记:通俗理解卷积神经网络【转】

    本文转载自:https://blog.csdn.net/v_july_v/article/details/51812459 通俗理解卷积神经网络(cs231n与5月dl班课程笔记) 1 前言 2012 ...

  7. winlog

    下载 https://www.elastic.co/downloads/beats/winlogbeat PS C:\Users\Administrator> cd 'C:\Program Fi ...

  8. What is OWIN? A Beginners Guide

    http://www.codedigest.com/posts/1/what-is-owin-a-beginners-guide http://owin.org/html/spec/owin-1.0. ...

  9. springMVC注解的参数传递

    1.web.xml <?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xsi=&qu ...

  10. SQL Server----解决SQL Server 配置管理器不见了

    错误重现: 之前安装好的SQL Server 2012打开都没有问题,好多天没有打开了,今天打开我的SQL Server 2012 连接时出现错误: 在与SQL Server 建立连接时出现与网络相关 ...