FusionCharts 學習

 去年有好幾個項目需要用到圖表顯示, 原打算使用JFreeChart的, 但感覺其在外觀展示與交互性方面都不如一些Flash Chart來得酷, 在網上搜索相關資料時候發現很多人推薦FusionCharts, 自己看了一下效果, 確實挺不錯的. 也考慮過使用VML來實現統計圖表的顯示, 就像我在上一篇博文Web開發系列 - VML介紹VML中所說, VML僅限於IE瀏覽器, 最終還是決定使用FusionCharts. FusionCharts是一個基於Flash的圖表組件，可以用來提供數據驅動的動態圖標，FusionCharts可用於任何網頁腳本語言如， HTML格式，JSP, Asp.Net, PHP技術等等。提供交互式和強大的動態圖標，FusionCharts充分利用流體美麗的Flash爲模板，使用XML作爲其數據接口，創造緊湊，互動和真正的動態圖表. 更多內容可以閱讀去年我轉載的一篇介紹FusionCharts文章[轉載] FusionCharts的研究, 其官方主頁爲http://www.fusioncharts.com/,  相關例子可以訪問http://www.fusioncharts.com/LiveDemos.asp.

   結合自己在JSP項目中用戶操作日誌統計模塊的實現, 來介紹FusionCharts中常見幾種圖表的實現過程. 當用戶點擊頁面上的統計按鈕時, 通過JavaScript對用戶輸入合法性進行驗證判斷後提交該請求, 由後臺Servlet或Action對數據庫中數據按照所需條件進行檢索彙總, 得到的結果集按照FusionCharts控件所需的XML格式進行響應輸出, 然後通過AJAX技術獲取該XML內容給FusionCharts控件使用. 特別值得一提的是, FusionCharts附帶的使用文檔製作得很好, 非常全面具體, 按照其提供的文檔去實現圖表非常方便.

首先, 我們需要準備好用到的swf與FusionCharts.js等文件, 在JSP頁面頭部引入所需的JS文件. 這裏AJAX庫採用了精簡之後的prototype, 大家可以採用自己熟悉擅長的,如JQuery, ext等JS庫.

<script type="text/javascript" src="Admin/ecside/js/prototype_mini.js"></script>
<script type="text/javascript" language="javascript" src="Admin/JS/FusionCharts.js"></script>

其次, 提供圖表顯示所需的容器如一個Div, 這裏我們提供了一個ID爲chart1div的div

<div id="mbDIV" style="display: none;"></div>
<div id="loginDIV" style="top: 120px;left: 150px;display: none;" class="noprint">
<div id="loginTopDIV">
<div style="float:left;">日誌統計情況div>
<div style="float:right;"><a href="javascript:onhidden();">[ 關閉 ]</a></div>
</div>
<div style="padding:15px;" class="noprint">
<div id="chart1div" ></div>
</div>
</div>

最後, 需要書寫提交請求以及獲取XML形式結果的JavaScript腳本

 function onShow()
 {
    var logType=$('txtLogType').value;
    var dt1=$('dt1').value;
    var dt2=$('dt2').value;
    
    // Define REST web service URL 
    var url = 'CountServlet';
    // Prepare parameters to send into REST web service
    var pars="status=logCount&txtLogType="+logType+"&dt1="+dt1+"&dt2="+dt2;

    // Make web service AJAX request via prototype helper, 
    // upon response, call showResponse method        
    new Ajax.Request( url, { method: 'post', parameters: pars, onComplete: showResponse });
                       
    //To pass parameters, URLEncode the dataURL. Use escape() in JavaScript 
    //var url = escape("CountServlet?status=logCount&txtLogType="+logType+"&dt1="+dt1+"&dt2="+dt2);
 }
 
  // Method invoked when page receives AJAX response from REST web service 
 function showResponse(originalRequest)    
 {
    var obj=document.getElementById('loginDIV');
    obj.style.top = "60px";
    obj.style.left = "200px";
    var logType=document.getElementById('txtLogType').value;
    var chartSWF;
    if(logType == "-1")
    {
        chartSWF="Admin/Charts/FCF_Column3D.swf";
    }
    else
    {
        chartSWF="Admin/Charts/Pie3D.swf";
    }
   
    chartSWF = chartSWF + "?ChartNoDataText=當前查詢結果爲空";
    //Create another instance of the chart.
    var chart1 = new FusionCharts(chartSWF, "chart1Id", "550", "400", "0", "0");                   
    var strXML = originalRequest.responseText;
    chart1.setDataXML(strXML);
    chart1.render("chart1div");
    show("loginDIV");
    show("mbDIV")
 }

複製代碼

FCF_Column3D.swf

<graph caption="日誌統計情況" xAxisName="日誌類型" yAxisName="Amount" rotateYAxisName="0" decimalPrecision="0"
formatNumberScale="0" baseFont="Arial" baseFontSize="12">
<set name="用戶操作" value="70" color="AFD8F8" /> 
</graph>

複製代碼

Pie3D.swf

<graph showNames="1" decimalPrecision="0" baseFont="Arial" baseFontSize="12">
<set name="Web客戶端用戶登錄" value="10" />
<set name="Web客戶端用戶退出" value="5" />
<set name="客戶端登錄" value="12" />
<set name="客戶端退出" value="12" />
<set name="錄像回放" value="3" />
<set name="實時監控" value="28" />
</graph>

ScrollColumn2D.swf

<chart caption="系統日誌統計" xAxisName="用戶" yAxisName="次數" showValues="0" palette="2" shownames="1" legendBorderAlpha="0" useRoundEdges="1"
animation="1" decimalPrecision="0" formatNumberScale="0" baseFont="Arial" baseFontSize="12">
 <categories>
  <category label="管理員" /> 
  <category label="FJSDXHXY" /> 
  <category label="監控中心" /> 
  <category label="維護人員" /> 
  <category label="師大監控中心" /> 
  </categories>
  <dataset seriesName="報警" color="AFD8F8" showValues="0">
  <set value="68" /> 
  <set value="0" /> 
  <set value="0" /> 
  <set value="0" /> 
  <set value="0" /> 
  </dataset>
  <dataset seriesName="用戶操作" color="8BBA00" showValues="0">
  <set value="4600" /> 
  <set value="0" /> 
  <set value="71" /> 
  <set value="0" /> 
  <set value="0" /> 
  </dataset>
</chart>

複製代碼

ScrollLine2D.swf

<!--

Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

--><chart caption="系統日誌統計" xAxisName="操作類型" yAxisName="次數" showValues="0"
 palette="2" shownames="1" legendBorderAlpha="0" useRoundEdges="1" numdivlines="9"
 lineThickness="2" anchorRadius="3" anchorBgAlpha="50" showAlternateVGridColor="1"
 numVisiblePlot="12" labelStep="5" decimalPrecision="0" formatNumberScale="0" baseFont="Arial" baseFontSize="12">
 <categories>
  <category label="客戶端登錄" /> 
  <category label="客戶端退出" /> 
  <category label="開始遠程歷史視頻回放" /> 
  <category label="結束遠程歷史視頻回放" /> 
  <category label="遠程佈防" /> 
  <category label="遠程撤防" /> 
  <category label="遠程清除報警" /> 
  <category label="調節畫面參數" /> 
  <category label="遠程DVR配置" /> 
  <category label="遠程DVR配置結束" /> 
  <category label="遠程DVR狀態查詢" /> 
  <category label="數據編輯開始" /> 
  <category label="數據編輯結束" /> 
  <category label="地圖配置開始" /> 
  <category label="地圖配置結束" /> 
  <category label="刪除視頻通道組合" /> 
  <category label="增加視頻通道組合" /> 
  <category label="實時截取畫面" /> 
  <category label="瀏覽本地存儲的媒體文件" /> 
  <category label="開啓通道監聽" /> 
  <category label="關閉監聽" /> 
  <category label="調用通道視頻窗口" /> 
  <category label="關閉視頻窗口" /> 
  <category label="Web客戶端用戶登錄" /> 
  <category label="Web客戶端用戶退出" /> 
  <category label="實時監控" /> 
  <category label="雲臺控制" /> 
  <category label="錄像回放" /> 
  <category label="修改密碼" /> 
  </categories>
  <dataset seriesName="FJSDXHXY">
  <set value="422" /> 
  <set value="389" /> 
  <set value="24" /> 
  <set value="24" /> 
  <set value="561" /> 
  <set value="416" /> 
  <set value="16" /> 
  <set value="23" /> 
  <set value="114" /> 
  <set value="114" /> 
  <set value="439" /> 
  <set value="907" /> 
  <set value="906" /> 
  <set value="4" /> 
  <set value="4" /> 
  <set value="17" /> 
  <set value="21" /> 
  <set value="1" /> 
  <set value="7" /> 
  <set value="58" /> 
  <set value="16" /> 
  <set value="19" /> 
  <set value="18" /> 
  <set value="18" /> 
  <set value="7" /> 
  <set value="31" /> 
  <set value="18" /> 
  <set value="5" /> 
  <set value="1" /> 
  </dataset>
  <dataset seriesName="監控中心">
  <set value="12" /> 
  <set value="12" /> 
  <set value="0" /> 
  <set value="0" /> 
  <set value="0" /> 
  <set value="0" /> 
  <set value="0" /> 
  <set value="0" /> 
  <set value="0" /> 
  <set value="0" /> 
  <set value="0" /> 
  <set value="0" /> 
  <set value="0" /> 
  <set value="0" /> 
  <set value="0" /> 
  <set value="0" /> 
  <set value="0" /> 
  <set value="0" /> 
  <set value="0" /> 
  <set value="0" /> 
  <set value="0" /> 
  <set value="0" /> 
  <set value="0" /> 
  <set value="10" /> 
  <set value="6" /> 
  <set value="28" /> 
  <set value="0" /> 
  <set value="3" /> 
  <set value="0" /> 
  </dataset>
  <dataset seriesName="維護人員">
  <set value="12" /> 
  <set value="12" /> 
  <set value="0" /> 
  <set value="0" /> 
  <set value="0" /> 
  <set value="0" /> 
  <set value="0" /> 
  <set value="0" /> 
  <set value="0" /> 
  <set value="0" /> 
  <set value="0" /> 
  <set value="0" /> 
  <set value="0" /> 
  <set value="0" /> 
  <set value="0" /> 
  <set value="0" /> 
  <set value="0" /> 
  <set value="0" /> 
  <set value="0" /> 
  <set value="0" /> 
  <set value="0" /> 
  <set value="0" /> 
  <set value="0" /> 
  <set value="10" /> 
  <set value="6" /> 
  <set value="28" /> 
  <set value="0" /> 
  <set value="3" /> 
  <set value="0" /> 
  </dataset>
  <dataset seriesName="師大監控中心">
  <set value="12" /> 
  <set value="12" /> 
  <set value="0" /> 
  <set value="0" /> 
  <set value="0" /> 
  <set value="0" /> 
  <set value="0" /> 
  <set value="0" /> 
  <set value="0" /> 
  <set value="0" /> 
  <set value="0" /> 
  <set value="0" /> 
  <set value="0" /> 
  <set value="0" /> 
  <set value="0" /> 
  <set value="0" /> 
  <set value="0" /> 
  <set value="0" /> 
  <set value="0" /> 
  <set value="0" /> 
  <set value="0" /> 
  <set value="0" /> 
  <set value="0" /> 
  <set value="10" /> 
  <set value="6" /> 
  <set value="28" /> 
  <set value="0" /> 
  <set value="3" /> 
  <set value="0" /> 
  </dataset>
  <dataset seriesName="管理員">
  <set value="422" /> 
  <set value="389" /> 
  <set value="24" /> 
  <set value="24" /> 
  <set value="561" /> 
  <set value="416" /> 
  <set value="16" /> 
  <set value="23" /> 
  <set value="114" /> 
  <set value="114" /> 
  <set value="439" /> 
  <set value="907" /> 
  <set value="906" /> 
  <set value="4" /> 
  <set value="4" /> 
  <set value="17" /> 
  <set value="21" /> 
  <set value="1" /> 
  <set value="7" /> 
  <set value="58" /> 
  <set value="16" /> 
  <set value="19" /> 
  <set value="18" /> 
  <set value="18" /> 
  <set value="7" /> 
  <set value="31" /> 
  <set value="18" /> 
  <set value="5" /> 
  <set value="1" /> 
  </dataset>
 </chart>

園友們相關文章

FusionCharts等產品簡介