解壓縮出來(lái),主要關(guān)注以下幾個(gè)目錄:
? FusionChartsSuiteXTEval\FusionWidgets XT\Charts下的swf文件.這里使用的是RealTimeLine.swf.
? FusionChartsSuiteXTEval\FusionWidgets XT\Code\RealTime目錄就是一些示例.
? FusionChartsSuiteXTEval\FusionWidgets XT\Contents\RealTime和FusionChartsSuiteXTEval\FusionWidgets XT\Contents\DataStreaming,主要是一些文檔的參考.
2. 先把官方的例子跑起來(lái).
官方只帶了一個(gè)jsp的示例,我們將其配置到tomcat中.在server.xml中配置虛擬目錄,指定到FusionChartsSuiteXTEval\FusionWidgets XT目錄.
最簡(jiǎn)單的示例:SimpleExample.html、Data.xml.這里將Data.xml文件中的dataStreamURL改為StockPrice.jsp.看一下StockPrice.jsp文件,其實(shí)很簡(jiǎn)單,就是打印這樣的數(shù)據(jù)格式:&label=12:23:45&value=23.
剛剛那個(gè)只有一條線(xiàn),現(xiàn)在看一個(gè)怎么樣有兩條線(xiàn)的:MultipleDS.html、MultipleDS.xml,這里官方?jīng)]有提供了jsp的例子.我們可以看下StockPriceGoogDell.asp文件.不會(huì)asp沒(méi)關(guān)系,其實(shí)我們只要關(guān)注最后一行的輸出:
把官方的提供的StockPrice.jsp稍作修改,簡(jiǎn)單點(diǎn)就改成了這樣:
效果如圖:
關(guān)于輸出的數(shù)據(jù)格式的問(wèn)題,可以參考FusionChartsSuiteXTEval\FusionWidgets XT\Contents\RealTime目錄下的RealTimeDataFormat.html文件.
3. 如何使用FusionCharts的js的API了來(lái)控制數(shù)據(jù)的改變.那就得參考FusionChartsSuiteXTEval\FusionWidgets XT\Contents\DataStreaming目錄下的JSAPI.html和JSFeed.html.
JSFeed.html提供了比較完整的例子:
其中最重要的兩點(diǎn)就是:
(1) 獲取chart的ID:var chartRef = FusionCharts("ChId1");
(2) 更新數(shù)據(jù):chartRef.feedData(strData);
只要掌握了這兩點(diǎn),就可以做一些稍微復(fù)雜些的例子了,比如下圖一個(gè)頁(yè)面上同時(shí)有多個(gè)實(shí)時(shí)刷新圖:
4. 從上面可以看到實(shí)時(shí)圖是有水印的:
如何去掉這個(gè)水印呢?
這里用到了URL Action Editor6.0.打開(kāi)RealTimeLine.swf文件,然后搜索Trial.
然后雙擊那一行,就可以修改文字了,刪除也行.
效果如圖:
From ITeye
狂歡繼續(xù)!【年終大促 巔峰盛"慧" 】促銷(xiāo)火熱進(jìn)行中 iPhone 6 Plus、 iPhone 6、iPad Air滿(mǎn)就送,還不趕快買(mǎi)買(mǎi)買(mǎi)!