+-
FusionCharts 3.2 使用说明 以及 swf

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.ossoft.cn/file/1210232-399253995,这个由于以前的csdn账号的资源区现在无法改成0分了,所以如果没有csnd账号的朋友,可以直接发邮件给我,我会直接把破解的swf发给你,邮箱地址:6[email protected],收到邮件有我会第一时间回复。

==========================服务器使用版本==========================

 步骤一:

 从官网下载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>&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://download.ossoft.cn/file/1210232-399253914

  

步骤四:

 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://download.ossoft.cn/file/1210232-399253953



<?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.ossoft.cn/file/1210232-399253547

好消息,现在提供在线swf和js下载地址

 链接:http://download.ossoft.cn/file/1210232-399253995

如果觉得不错记得分享下!~

特别说明:为了有更好的兼容性(在mac下也能显示),

推荐使用:百度的echarts,兼容到IE8!

下载地址:http://echarts.baidu.com/