标签：mysql servlet xml ajax 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”，返回内容为“<graph caption=‘MonthSale‘><set name=‘January‘ value=‘462‘ color=‘AFD8F8‘/><setname=‘Febrary‘ value=‘662‘ color=‘00D8F8‘/></graph>”
3. 用html建立简单的网页，放置一个按钮，通过点击按钮来绘制FusionCharts报表（太简单了，不写了，可以看源代码）；
4. 通过AJAX技术请求报表展示并返回xml数据，AJAX技术主要包括XMLHttpRequest对象和定义回调函数，在回调函数中接收返回的xml数据。代码如下：
<script language="javascript"src="js/FusionCharts.js" charset="GBK"></script>
<script language="javascript">
var xmlHttp;
function createXMLHttp(){
if (window.XMLHttpRequest) {
xmlHttp =new XMLHttpRequest();
} else {
xmlHttp =new ActiveXObject("Microsoft.XMLHTTP");
}
//alert("createok!");
}
functionshowFusionCharts() {
createXMLHttp();
xmlHttp.open("POST","GetFCXML");
xmlHttp.onreadystatechange= showMsgCallback;
xmlHttp.send(null);
//alert("sendok");
}
function showMsgCallback() {
if(xmlHttp.readyState== 4){
if(xmlHttp.status== 200){
displayfc(xmlHttp.responseText);
}
}
}
</script>
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
九、 实验代码
见附件。
本文出自 “易仔阿克的博客” 博客，请务必保留此出处http://lifudong.blog.51cto.com/2357095/1585917
标签：mysql servlet xml ajax fusioncharts
原文地址：http://lifudong.blog.51cto.com/2357095/1585917
