轉自：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.
然后雙擊那一行,就可以修改文字了,刪除也行.
效果如圖：
