1.建立圖表步驟:

A.下載fushionChart,引入FusionCharts.js和FusionChartsExportComponent.js文件

B.建立圖表對象

var chart1 =new FusionCharts(imgUrl, "chart1Id", "800", "400","0","1");

param1:使用的flash文件的路徑

param2:對象ID

param3:圖表長

param4:圖表高

param5:是否顯示Debug信息

param6:使用圖片導出時需置為1

C:設置圖表對象對應XML內容

使用JSON數據,拼接為XML格式數據

XML格式如下

//簡單格式

<chart caption='省份-營收餅圖' xAxisName='省份' yAxisName='營收' baseFont='宋體' baseFontSize='12' exportEnabled='1' exportAtClient='1' exportHandler='fcExporter1' >
<set name='廣東' value='14.9' />
<set name='湖南' value='3.3' />
</chart>

//復雜格式 雙Y軸
<chart palette='2' caption='自定義圖表' rotateNames='0' showValues='1' divLineDecimalPrecision='1' limitsDecimalPrecision='1'   formatNumberScale='1' exportEnabled='1' exportAtClient='1' exportHandler='fcExporter1'>
<categories> //x軸值 dataset中的值個數需與之一致
<category label='2015第2季度' /> 
<category label='2015第3季度' />
 </categories> 
<dataset  renderAs='Line' parentYAxis='S' seriesName='用戶數量'>
<set value='4' /> 
<set value='1' /> 
</dataset>
 <dataset  renderAs='Line' parentYAxis='S' seriesName='人均消費金額'>
<set value='3.725' />
 <set value='3.3' />
 </dataset> 
</chart> 

將拼接好的字符串設置-->

chart1.setDataXML(strXML);

strXML為拼接好的XML字符創

D:render至DIV中

chart1.render("container"); container為html中id為此的div空標簽

至此,圖表建立完畢,接下來進行圖表的導出

2.圖表的導出

A:在拼接的字符串中的chart元素中,增加屬性exportEnabled='1' exportAtClient='1' exportHandler='fcExporter1'

B:在圖表render之后代碼下,配置導出圖表的對象及按鈕樣式

var myExportComponent = new FusionChartsExportObject("fcExporter1", "/adminthemes/FusionCharts/FCExporter.swf"); //該flase文件是固定路徑,第一個參數要與chart元素屬性exportHandler一致
myExportComponent.componentAttributes.btnColor = 'EAF4FD';
myExportComponent.componentAttributes.btnBorderColor = '0372AB';
myExportComponent.componentAttributes.btnFontFace = 'Verdana';
myExportComponent.componentAttributes.btnFontColor = '0372AB';
myExportComponent.componentAttributes.btnFontSize = '12';
//Title of button
myExportComponent.componentAttributes.btnsavetitle = '另存為'
myExportComponent.componentAttributes.btndisabledtitle = '右鍵生成圖片';
myExportComponent.Render("fcexpDiv");

至此,導出亦可以使用,不過有個Bug,當對此調用這個myExportComponent對象時候,第二次將無法使用

對此,我找遍百度也沒找到解決方式,最后,自己觀察這控件自動生成的代碼得出結論,將自動生成的object標簽的id更改為第一次載入的時候的id即可,即:

//更改object標簽id使之初始化
$("#fcexpDiv object").attr("id","fcExporter1");

只有這樣,object標簽才會初始化,而通過刪除其自動生成的代碼并無法正在初始化,原因不明.

總結

以上是生活随笔為你收集整理的fushioncharts 使用教程要点---使用JSON数据方式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。