1.建立圖表步驟:

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

B.建立圖表對(duì)象

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

param1:使用的flash文件的路徑

param2:對(duì)象ID

param3:圖表長(zhǎng)

param4:圖表高

param5:是否顯示Debug信息

param6:使用圖片導(dǎo)出時(shí)需置為1

C:設(shè)置圖表對(duì)象對(duì)應(yīng)XML內(nèi)容

使用JSON數(shù)據(jù),拼接為XML格式數(shù)據(jù)

XML格式如下

//簡(jiǎn)單格式

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

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

將拼接好的字符串設(shè)置-->

chart1.setDataXML(strXML);

strXML為拼接好的XML字符創(chuàng)

D:render至DIV中

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

至此,圖表建立完畢,接下來進(jìn)行圖表的導(dǎo)出

2.圖表的導(dǎo)出

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

B:在圖表render之后代碼下,配置導(dǎo)出圖表的對(duì)象及按鈕樣式

var myExportComponent = new FusionChartsExportObject("fcExporter1", "/adminthemes/FusionCharts/FCExporter.swf"); //該flase文件是固定路徑,第一個(gè)參數(shù)要與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");

至此,導(dǎo)出亦可以使用,不過有個(gè)Bug,當(dāng)對(duì)此調(diào)用這個(gè)myExportComponent對(duì)象時(shí)候,第二次將無法使用

對(duì)此,我找遍百度也沒找到解決方式,最后,自己觀察這控件自動(dòng)生成的代碼得出結(jié)論,將自動(dòng)生成的object標(biāo)簽的id更改為第一次載入的時(shí)候的id即可,即:

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

只有這樣,object標(biāo)簽才會(huì)初始化,而通過刪除其自動(dòng)生成的代碼并無法正在初始化,原因不明.

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。