首先看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
附帶截圖
這個是從表格數據生成餅狀圖,