报表工具FusionCharts的使用方法

报表工具FusionCharts使用方法

一、 主题

报表工具FusionCharts的使用方法。

二、 目标

介绍使用FusionCharts的相关工具、方法、原理以及过程。

三、 概述

FusionCharts是一个很好的报表展示工具，不过需要Java相关语言工具辅助才能实现。实现方法也不难理解，包括数据准备、XML数据生成、FusionCharts控件加载以及报表展示。

四、 语言、工具、环境

Java Web相关语言工具包括：HTML、javascript、Ajax、Java/Servlet，数据库采用MySQL，Web中间件采用Tomcat。

五、 过程

1.        创建数据库test并插入数据，具体内容见附件sql文件；

2.        建立Java/Servlet文件，安装FusionCharts输入xml数据的格式要求，从mysql数据库中查询数据并拼装成xml文件（GetFCXML.java）。编写完成后，测试数据组装与返回内容（执行“http://localhost:8080/ajax/GetFCXML”，返回内容为“”

3.        用html建立简单的网页，放置一个按钮，通过点击按钮来绘制FusionCharts报表（太简单了，不写了，可以看源代码）；

4.        通过AJAX技术请求报表展示并返回xml数据，AJAX技术主要包括XMLHttpRequest对象和定义回调函数，在回调函数中接收返回的xml数据。代码如下：

5.        将AJAX回调函数中返回的xml数据作为FusionCharts插件的初始化数据，就可以看到报表了。代码如下：

function displayfc(xmlstr){

              var chart = newFusionCharts("charts/Column3D.swf", "myChartId","500", "300");

              chart.setDataXML(xmlstr);           // 只要给这个参数赋值就可以了！

              chart.render("chartContainer");

       }

六、 报表展示效果

七、 总结

作者在实现这个功能前，从网上查了相关资料，不过大部分资料都是从某个项目中截取的，实现起来比较复杂，对于初学者也比较麻烦，并且难以理解，附件代码中的实现过程是一个最精简版本，便于上手。归纳起来实现要点包括：

1、  采用Servlet基于数据库拼装FusionCharts报表控件显示所需的xml数据；

2、  采用AJAX发起数据拼装请求并将返回结果传递给FusionCharts控件实例；

3、  将FusionCharts控件的js文件和swf文件取出（注意是解密版，否则会显示trial字样，很不爽！）并在js中完成装载。

八、 参考资料

1.        http://fengfeng925.iteye.com/blog/581755

2.        http://sarin.iteye.com/blog/711494

九、 实验代码

    见附件。