FusionCharts 3.2 使用说明以及 swf

Baple

于 2016-06-06 16:18:10 发布

阅读量2.6k

点赞数

分类专栏： JavaScript相关 WEB前端文章标签： fusioncharts 图表

本文链接：https://blog.csdn.net/Baple/article/details/51596318

版权

WEB前端同时被 2 个专栏收录

79 篇文章 0 订阅

订阅专栏

JavaScript相关

18 篇文章 0 订阅

订阅专栏

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/

存放到项目对应位置：

步骤二：

页面编写：

Copy

<!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>&nbsp;</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,点击下载：

（链接：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里面配置：

Copy

<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

Copy

<?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>

步骤五：

启动服务器，输入地址：如图