博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
fushioncharts 使用教程要点---使用JSON数据方式
阅读量:7025 次
发布时间:2019-06-28

本文共 1696 字,大约阅读时间需要 5 分钟。

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标签才会初始化,而通过删除其自动生成的代码并无法正在初始化,原因不明.

 

转载于:https://www.cnblogs.com/fanglorry/p/4633071.html

你可能感兴趣的文章
leetcode 二叉树中序遍历的递归和非递归实现
查看>>
iOS 推送问题全解答《十万个为啥吖?》
查看>>
style中注释引起的错位,警惕IE全家
查看>>
Linux 磁盘管理
查看>>
Rhel5下的Xmanager配置
查看>>
谈谈WEB开发中的苦大难字符集问题
查看>>
使用paramiko模块复制远程文件到本地
查看>>
Rails practise
查看>>
将JSP页面改写成HTML(二)
查看>>
Hyper-V中安装Linux的集成服务3.2
查看>>
Java继承
查看>>
linux输出屏蔽
查看>>
Log4j 配置使用详解
查看>>
ubuntu redis 安装
查看>>
Clonezilla使用汇总
查看>>
Android开发实践:基于命令模式的异步任务线程
查看>>
Eclipse中正则表达式删除所有注释
查看>>
hive 数据迁移
查看>>
[iOS Animation]-CALayer 专用图层 CATextLayer
查看>>
浅谈 iOS 版本号
查看>>