FusionCharts 3.2 使用:
今天(2013-09-14)有时间重新整理一下FusionCharts 3.2 使用,主要是排版简便和操作方便。
以前用的是最老版的,不支持导出图片,不支持json数据,
个人暂时发现新的版本几个好处: 1、支持导出图片 2、json数据格式的支持。
下面说下,新版本的用法吧(现在已经不是最新的了最新版本:3.3.1,不过应该通用),留个备份:
==========================静态页面版本==========================
使用这个版本很简单:
1、从官网下载例子:下载地址:http://www.fusioncharts.com/download/,现在最想的已经是3.3.1版本。
但是下载的版本里面显示的flash是有fusionchart的logo的,我想很多朋友主要是想要这个破解的文件,
很简单,请操作第二步。
2、swf下载:http://download.csdn.net/detail/misswuyang/3600279,这个由于以前的csdn账号的资源区现在无法改成0分了,所以如果没有csnd账号的朋友,可以直接发邮件给我,我会直接把破解的swf发给你,邮箱地址:admin@aiisen.com,收到邮件有我会第一时间回复。
==========================服务器使用版本==========================
步骤一:
从官网下载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,实现,部分代码截图:
![](http://www.aiisen.com/files/upload/2013/06/23/dd472881-27cd-4b30-9c69-b046c34d347e.png)
注意:1、自己写了个方法【setDataUrlParams】,可以往里面传参数
2、这个当调试的时候,发现每次都会调用2次ajax到后台取数据,研究FusionCharts.debug.js后发现,在1681行的问题,注释后ok!如图:
3、自己改写的js,点击下载:
(链接:http://pan.baidu.com/share/link?shareid=4175037387&uk=959541513密码:ppn0)
步骤四:
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>
<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,点击下载:
链接:http://pan.baidu.com/share/link?shareid=4177185228&uk=959541513 密码:88kh
<?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>
步骤五:
启动服务器,输入地址:如图
![](http://www.aiisen.com/files/upload/2013/06/23/24ff6690-e401-47b0-9f03-333e476c979d.png)
步骤六:
下载破解版的swf,这样生成的flash里面就没有了fusionChart的logo了
下载地址:http://download.csdn.net/detail/misswuyang/3600279
如果没有csdn分,可以发邮件给我,我会直接通过邮件发给你,邮箱 admin@aiisen.com
好消息,现在提供在线下载地址:
(链接:http://pan.baidu.com/share/link?shareid=4155649333&uk=959541513 密码:bqcp)
如果觉得不错记得分享下!~
特别说明:为了有更好的兼容性(在mac下也能显示),
推荐使用:百度的echarts,兼容到IE8!