fushioncharts 使用教程要点---使用JSON数据方式

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数据方式

最新文章

热门文章