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格式如下
//简单格式//复杂格式 双Y轴 //x轴值 dataset中的值个数需与之一致
将拼接好的字符串设置-->
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标签才会初始化,而通过删除其自动生成的代码并无法正在初始化,原因不明.