FusionCharts 3.2 使用:
这几天项目事情不是很多,研究了下FusionCharts 3.2 。
以前用的是最老版的,不支持导出图片,不支持json数据
个人暂时发现新的版本几个好处: 1、支持导出图片 2、json数据格式的支持。
下面说下,新版本的用法吧,留个备份:
新版本在线预览地址:http://220.178.14.19:8081/fusioncharts
步骤一:
从官网下载js文件和swf,地址:http://www.fusioncharts.com/download/
存放到项目对应位置:
步骤二:
页面编写:
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>fusionchartV3 测试</title>
- </head>
- <body>
- <script type="text/javascript" src="${ctx}/scripts/fusioncharts/FusionCharts.js"></script>
- <h3>fusionchartV3 测试</h3>
- <p> </p>
- <div id="chartdiv" align="center"> </div>
- <script type="text/javascript">
- var chart = new FusionCharts("${ctx}/scripts/fusioncharts/swf/MSColumn3D.swf", "ChartId", "560", "400", "0", "0");
- chart.setDataUrlParams("id", "61122");
- chart.setDataURL("${ctx}/fusioncharts/Index.do?method=MSColumn3DSale");
- chart.render("chartdiv");
- </script>
- <script type="text/javascript" src="${ctx}/commons/scripts/jquery.js"></script>
- <script type="text/javascript">//<![CDATA[
- //]]></script>
- </body>
- </html>
步骤三:
后台代码:【部分代码有省略】我这里是用freemarker模块生成xml,实现,部分代码截图:
注意:1、自己写了个方法【setDataUrlParams】,可以往里面传参数
2、这个当调试的时候,发现每次都会调用2次ajax到后台取数据,研究FusionCharts.debug.js后发现,在1681行的问题,注释后ok!如图:
3、自己改写的js下面有下载
步骤四:
xml文件:我这里是部分写活的:这里已经配置了导出图片的参数: exportEnabled="1",具体的说明:
http://www.fusioncharts.com/docs/ 里面的 http://www.fusioncharts.com/docs/ECXML.html
推荐用:exportAtClient="0" 客户端导出这个模式,速度快, exportHandler="${((ctx)!' ')?html}/FCExporter.do",
exportHandler是后台导出的方法链接,我的实现
1、servlet里面配置 :
- <servlet-name>FCExporter</servlet-name>
- <servlet-class>com.fusioncharts.exporter.servlet.FCExporter</servlet-class>
- </servlet>
- <servlet-mapping>
- <servlet-name>FCExporter</servlet-name>
- <url-pattern>/FCExporter.do</url-pattern>
- </servlet-mapping>
2、引入fcexporter.jar和fcexporthandler.jar(下载包中有),在用的过程中发现自带的jar包虽然图片可以导出,但是部分代码
报错,所以我有重新改写了下代码,打成了一个jar包fusioncharts.jar,下面有下载
- <?xml version="1.0" encoding="GBK"?>
- <chart exportFileName="${((exportFileName)!' ')?html}" exportEnabled="1" exportAction="download" exportAtClient="0" exportHandler="${((ctx)!' ')?html}/FCExporter.do" caption="Country Comparison" showLabels="1" showvalues="0" decimals="0" numberPrefix="$">
- <categories>
- <category label="Austria" />
- <category label="Brazil" />
- <category label="France" />
- <category label="Germany" />
- <category label="USA" />
- </categories>
- <dataset seriesName="1996" color="AFD8F8" showValues="0">
- <set value="${((id)!' ')?html}" />
- <set value="20148.82" />
- <set value="17372.76" />
- <set value="35407.15" />
- <set value="38105.68" />
- </dataset>
- <dataset seriesName="1997" color="F6BD0F" showValues="0">
- <set value="57401.85" />
- <set value="41941.19" />
- <set value="45263.37" />
- <set value="117320.16" />
- <set value="114845.27" />
- </dataset>
- <dataset seriesName="1998" color="8BBA00" showValues="0">
- <set value="45000.65" />
- <set value="44835.76" />
- <set value="18722.18" />
- <set value="77557.31" />
- <set value="92633.68" />
- </dataset>
- </chart>
步骤五:
启动服务器,输入地址:如图
步骤六:
下载破解版的swf,这样生成的flash里面就没有了fusionChart的logo了
下载地址:http://download.csdn.net/detail/misswuyang/3600279