fusionchars報表插件的使用

首先看demo(明白自己想要什麼):http://www.fusioncharts.com/demos/gallery/#column-and-bar

下載地址:http://www.fusioncharts.com/download/trials/ 

下載成功後便可以在FusionChartsSuiteXTEval\FusionCharts XT\Code文件夾中選擇自己合適的編程語言項目導入工程中運行

FusionChartsSuiteXTEval\FusionCharts XT\Code\MyFirstChart中是一些簡單的例子,大家可以打開裏面的html文件看看怎麼運行的

下面描述下如何創建自己的第一個報表:

1.創建一個LearningFusionCharts文件夾作爲第一個chart例子的根目錄.

2.在LearningFusionCharts再建一個MyFirstChart文件夾,然後在MyFirstChart中創建FusionCharts文件夾

3.將FusionChartsSuiteXTEval\FusionCharts XT\Charts目錄下的Column3D.swf, FusionCharts.js,FusionCharts.HC.js, FusionCharts.HC.Charts.js,

jquery.min.js放入FusionCharts文件夾下,

4.在MyFirstChart創建Data.xml文件

內容:

<chart caption='Weekly Sales Summary'
   xAxisName='Week' yAxisName='Amount' numberPrefix='$'> 
    <set label='Week 1' value='14400' /> 
    <set label='Week 2' value='19600' /> 
    <set label='Week 3' value='24000' />
    <set label='Week 4' value='15700' /> 
</chart>

在MyFirstChart創建weekly-sales.html
內容
<html>
  <head>        
    <title>My First chart using FusionCharts XT</title>         
    <script type="text/javascript" src="FusionCharts/FusionCharts.js">
    </script>
  </head>   
  <body>     
    <div id="chartContainer">FusionCharts XT will load here!</div>          
    <script type="text/javascript"><!--         

      var myChart = new FusionCharts( "FusionCharts/Column3D.swf", 
      "myChartId", "400", "300", "0" );
      myChart.setXMLUrl("Data.xml");
      myChart.render("chartContainer");
      
    // -->     
    </script>      
  </body> 
</html>
打開weekly-sales.html便可看到
下面分析運行原理:
如果你想要使用fusionchars創建一個chart你需要
1.Chart SWF 文件 :使用Adobe Flash player來繪製報表,如例子中的FusionCharts/Column3D.swf(http://docs.fusioncharts.com/charts/contents/Introduction/ChartList.html:此鏈接能查看fusionchart中所有swf文件)
2.Chart data 數據:例子中Data.xml的的信息,fusionchart有2種格式的數據格式:
一種是xml格式(見:http://docs.fusioncharts.com/charts/contents/DataFormats/XML/Overview.html)
一種是Json格式(見:http://docs.fusioncharts.com/charts/contents/DataFormats/JSON/Overview.html)
3.JavaScript class 文件如上面的FusionCharts.js等等:這些文件主要是爲了將swf生成的報表放入html中顯示,如果你使用比如:ipad/iPhone等不支持
Adobe Flash player的設備瀏覽fusionchart生成的報表這時主要就是這些js文件繪製chart
4.HTML 頁面,也就是所要顯示的頁面


以上只是粗略的介紹詳細的請看官網入門:http://docs.fusioncharts.com/charts/contents/FirstChart/FirstChart.html
如果生成chart過程中出現問題請看上面鏈接中的 Troubleshooting部分(裏面對一般的錯誤信息都進行了分析)
對於initChart的分析,也就是以下的內容
<script type="text/javascript"><!--         

      var myChart = new FusionCharts( "FusionCharts/Column3D.swf", 
      "myChartId", "400", "300", "0" );
      myChart.setXMLUrl("Data.xml");
      myChart.render("chartContainer");
      
    // -->     
    </script> 
myChartId:所要生成的charts的id(頁面中這個ID應該是唯一的);400和300是寬高;0這個屬性已經棄用;chartContainer:是chart繪製在html頁面中的DIV的ID
更詳細的介紹請查看:http://docs.fusioncharts.com/charts/contents/JavaScript/API/Methods.html#chartparams

下面是fuisonchart工作原理圖:
http://docs.fusioncharts.com/charts/contents/guide-for-web-developers/how-fusioncharts-works/HowFCWorks.html
通過對比 Data URL method 和Data String method 可知:
如果你像上面的例子一樣使用靜態的:data.xml作爲數據源那麼對於一些設備,它對本地的文件會有安全限制,所有訪問不到xml文件
這時你應該是用
Data String method:
 
myChart.setXMLData("<chart><set label='Data1' value='1' /></chart>");來進行對數據源的設定
當然你可以查看下:FusionChartsSuiteXTEval\FusionCharts XT\Code\MyFirstChart文件夾中FormBased.html
附帶截圖
這個是從表格數據生成餅狀圖,



發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章