FusionCharts入門教程，使用指南

FusionCharts入門教程，使用指南

最近在項目中作了一個自定義指標配置的功能，其中的指標展示部分使用的FusionCharts，這個圖表的功能強大，入門簡單。

1、下載相關文件

首先從官方網站下載相關的內容，下載地址：http://www.fusioncharts.com/download/trials/。

其中的fusioncharts是一些經常使用的指標類型，如餅圖、折線圖、柱狀圖等等。

官方下載地址：http://www.fusioncharts.com/Downloads/Evals/FusionCharts_XT_Evaluation.zip

FusionWidgets是一些像儀表盤、溫度計、計量儀等類弄的圖表。

官方下載地址：http://www.fusioncharts.com/Downloads/Evals/FusionWidgets_XT_Trial.zip

官方全部下載地址：包括以上和powecharts、map等。

http://www.fusioncharts.com/downloads/Evals/FusionChartsSuiteXTEval.zip

從官方網站上下載的是試用版，在圖表的左上角會有一個Fusioncharts的水印（破解版就是去除這個水印，破解版能夠到網上搜索，這裏再也不提供），以下圖所示：

2、如何學習

破解版是去掉了上面的水印，相對於正式版沒有其餘的區別，因此代碼的書寫上是同樣的。這裏是以3.2版本爲例的。

將下載的壓縮包解壓，雙擊裏面的Index.html頁面，會打開一個主頁，裏面顯示有文檔、示例等，其中的Documentation是文檔，裏面有詳細的說明第一個的xml、json的示例，是學習使用的最佳文檔。

Chart Gallery算是一個快速導覽，裏面提供一些效果的展現。

Live Deom經常使用圖表的示例。

若是在這些裏面不方便查找本身想要的，能夠點擊code目錄，code目錄下面有具體第一個圖表的示例。點擊相應的文件夾便可瀏覽示例代碼。

3、如何編寫

一、使用時首先將charts目錄複製到本身的項目工程的某一個目錄下面。

二、在頁面中引入jquery的庫（能夠是charts目錄下面的jquery，也能夠是外部的）

三、引入FusionCharts.js庫，這個庫的路徑是在charts目錄下面，也就是圖表所在的目錄。

四、在頁面中開始編寫代碼。示例（計量儀）代碼以下：

五、爲簡單示意，就調了一個相關比較簡單的圖表，其餘圖表只是中間的JSON數據有區別，其餘地方區別不大。

六、逐行解釋意思：

new FusionCharts：這是新建一個圖表對象，其中第一個參數爲相對應的圖表地址；第二個參數此圖表的ID，用於在其餘地方調用；第三個參數是寬；第四個是高；第五個爲是否debug模式，0爲否；第六個參數爲是否註冊js，也就是js和flash是否能夠相互通訊調有。通常爲1.

var json:這裏爲我本身定義的json對象數據，FusionCharts支持XML和json兩種數據格式，我這裏是使用的json。

myChart.setJSONData(json)：將前面的數據傳入到FusionCharts中。這裏能夠使用xml的，代碼爲myChart.setXMLData（xml）。若是是遠程加載的，爲myChart.setXMLUrl（url）。

myChart.render("chartContainer")：渲染FusionCharts。裏面的參數爲html元素的容器ID。也主是在哪個容器裏面顯示此圖表。

這樣就完成了圖表的顯示。不一樣的圖表中在於其中json或者xml數據的區別，和圖表的一些元數據，如使用哪個圖表、寬、高等信息。其餘同樣，具體的能夠看文檔。

4、其餘

在網上下載的破解版，有時候會出現有些圖表數據不能正確顯示，仔細觀察但又發現json數據格式是正確。這個緣由是因爲js的問題，請從官網上下載最新的FusionCharts。而後將裏面的FusionCharts.js替換破解版裏面的便可。