RealTimeLine學習筆記

netloser 13年前發布 | 3K 次閱讀

1.什么是FusionCharts-RealTimeLine？

RealTimeLine顧名思義，就是實時的數據視圖,是FusionWidgets的一個插件：

 

實時數據圖：

樣式一：

RealTimeLine學習筆記

樣式二：

RealTimeLine學習筆記

樣式三：

RealTimeLine學習筆記

2.如何獲取FusionWidgets？

獲取FusionWidgets可以在FusionCharts官方下載FusionWidgetsV3版本：http://www.fusioncharts.com/Downloads/Evals/FusionWidgets_Trial.zip

 

3.如何使用FusionCharts？

以下是FusionCharts 文件包的目錄和文件：

 RealTimeLine學習筆記

我們用到的就只有兩個文件夾：

Charts 圖表要使用到的FLASH文件

JSClass 圖表的JS主函數

一般情況下我們把這兩個文件夾復制到我們工程目錄下即可。另外Gallery里面提供了部分例子，但Real-time / Data-streaming / Self-updating charts 這些并未提供，要熟悉相關寫法可參照官網的演示案例，查看其真實寫法：http://www.fusioncharts.com/widgets/gallery.asp#realtime1。

 

現在我們以第一個樣式為例子：

 

XML代碼：

<chart bgColor='000000' bgAlpha='100' canvasBorderThickness='2' canvasBorderColor='008040' canvasBgColor='000000' yAxisMaxValue='100'  decimals='0' numdivlines='16' numVDivLines='16' numDisplaySets='16' divLineColor='008040' vDivLineColor='008040' divLineAlpha='100' chartLeftMargin='10' baseFontColor='00dd00' showRealTimeValue='0' dataStreamURL='Data/RealTimeLine_Stream.html' refreshInterval='0.02' numberSuffix='%' labelDisplay='rotate' slantLabels='0' toolTipBgColor='000000' toolTipBorderColor='008040' baseFontSize='11' showAlternateHGridColor='0' legendBgColor='000000' legendBorderColor='008040' legendPadding='35' showLabels='1' >

 

<categories>

<category label='開始'/>

</categories>

 

<dataset color='00dd00' seriesName='統計一' showValues='0' alpha='80' anchorAlpha='0' lineThickness='3'>

<set value='0' />

</dataset>

 

<datset color='ff5904' seriesName='統計二' showValues='80' alpha='160' anchorAlpha='1' lineThickness='3'>

<set value='0' />

</dataset>

 

<dataset color='ffffff' seriesName='統計三' showValues='80' alpha='160' anchorAlpha='2' lineThickness='3'>

<set value='0' />

</dataset>

 

<dataset color='0000ff' seriesName='統計四' showValues='80' alpha='160' anchorAlpha='3' lineThickness='3'>

<set value='0' />

</dataset>

 

</chart>

 

 

部分屬性介紹：

1.最為重要是dataStreamURL這個屬性，這個屬性可以為動態的頁面，返回的必須為簡單的字符串，格式：&label=12:00:20&value=48|75|85|72|

這個屬性是非常重要的，如果書寫不正確將導致視圖無數據顯示。

下面是一些值得注意的地方:

 

a.dataStreamURL='Data/RealTimeLine_Stream.html' 路徑要注意，如果是相對路徑必須以調用當前XML的頁面為參照。

b.Data/RealTimeLine_Stream.html必須確保返回的正確的數據。為了測試這一點，只需打開瀏覽器并運行此網頁。它應該返回文本格式的數據。

c.Data/RealTimeLine_Stream.html的動態網頁必須返回文本格式數據，并且不能包含任何HTML元素。

 

2. refreshInterval為刷新數據的時間，確保填寫正確，否則數據無法顯示。經測試可以填寫大于零整數和小數。

 

HTML代碼：

 

 

<!-- 導入FusionCharts主函數 -->

<script src="JSClass/FusionCharts.js"></script>

 

<!-- 顯示餅圖的控件DIV -->

<div id="chartdiv" align="center"> 視圖將顯示在這里 </div>

 

<!-- 實例化圖表的函數 -->

    <script type="text/javascript">

        var myChart = new FusionCharts("Charts/RealTimeLine.swf", "myChartId", "600", "350", "0", "0");

        myChart.setDataURL("Data/RealTimeLine.xml");

          myChart.render("chartdiv");

    </script>

 

 

代碼解釋：

看到這里，你是不是覺得跟之前的餅圖差不多？沒錯，簡直是一模一樣

var myChart = new FusionCharts("Charts/RealTimeLine.swf", "myChartId", "600", "350", "0", "0");

創建一個圖表對象，Charts/RealTimeLine.swf為對應的swf文件。"ChartId"為放置圖表的控件"500", "300", "0", "0" 這段為圖表的寬高，邊距。

myChart.setDataURL("Data/RealTimeLine.xml");設置XML數據源的路徑。

myChart.render("chartdiv");設置圖表要顯示到的頁面控件。

 

 

為了方便測試，我們可以創建一個靜態的HTML頁面作為數據流，頁面位置：Data/ RealTimeLine_Stream.html

 HTML代碼（HTML頁面不可以放任何HTML元素，否則數據無法顯示）：

&label=12:00:20&value=48|75|85|72|


至此一個簡單的DEMO已經出來的，效果如下。

RealTimeLine學習筆記

 

總結：FusionCharts提供的各項表格視圖都比較簡單，大致分為兩步：

1.根據已編譯的SWF文件創建視圖，設置數據源的路徑及要顯示到的控件。

2.設置XML格式的數據源。

如果設置沒問題的話，數據就能顯示出來，而且顯示方式十分豐富。程序員不需要考慮效果是如果實現的（編譯好的SWF文件已經設定好），只需正確實例化對象，引入數據即可。這大大地減少了程序員的工作量。是不一款不錯的圖形工具。

更多詳細熟悉及效果待下一步研究。

 本文由用戶 netloser 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！