FusionCharts 3.2 使用

最新推荐文章于 2024-08-28 19:47:50 发布

langzhiwang888

最新推荐文章于 2024-08-28 19:47:50 发布

阅读量81

点赞数

文章标签： xhtml java json

本文链接：https://blog.csdn.net/langzhiwang888/article/details/84234385

版权

FusionCharts 3.2 使用：

这几天项目事情不是很多，研究了下FusionCharts 3.2 。

以前用的是最老版的，不支持导出图片，不支持json数据

个人暂时发现新的版本几个好处: 1、支持导出图片 2、json数据格式的支持。

下面说下，新版本的用法吧，留个备份：

新版本在线预览地址：http://220.178.14.19:8081/fusioncharts

步骤一：

从官网下载js文件和swf，地址：http://www.fusioncharts.com/download/

存放到项目对应位置：

步骤二：

页面编写：

    Html代码   
    
  
<!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下面有下载

步骤四：

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

    Xml代码   
    
<servlet>

    Xml代码   
    
  
<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代码   
    
  
<?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

langzhiwang888

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
FusionCharts 3.2 使用

FusionCharts 3.2 使用：这几天项目事情不是很多，研究了下FusionCharts 3.2 。以前用的是最老版的，不支持导出图片，不支持json数据个人暂时发现新的版本几个好处: 1、支持导出图片 2、json数据格式的支持。下面说下，新版本的用法吧，留个备份：新版本在线预览地址：http://220.178.14.19:80...
复制链接

扫一扫