fusionCharts图表组件使用
这里只简单介绍下FusionCharts，详情请百度。
FusionCharts 较其他图表组件的优势：
>> 图表美观，极具视觉震撼，支持图表的切片、旋转、无限级钻取；
>> 种类丰富，饼形、线、条形、柱形，仪表盘，热点地图等90种图表；
>> 可在flash和javascript中呈现图表，这意味着可通过智能手机客户端来访问我们的应用；
>> 提供了图表导出图片功能，支持将图表导入报告。
FusionCharts是一款flash图表插件，所以要想看到效果，需要在客户端安装flash插件。
熟悉构成FusionCharts的三要素：swf文件、xml数据源、承载图表的载体(页面)：
>> swf文件：生成图表的核心文件，生成某个图表时需在页面调用相应的.swf文件。
>> xml数据：作为图表展示的数据源，可以两种方式提供，一种是以xml文件形式，另外
一种是将后台数据转换为xml格式的字符串。Xml数据不仅包括展示数据，也包括图表的样式设置。
>> 图表载体：即图表容器，一般是html/jsp页面上的DIV.
一、 创建一个简单的图表demo
1. 准备过程：下载fusionCharts V3
最好去官网下载完整版，网上有些版本的JS文件有人为改动(简化)。
http://www.fusioncharts.com/download/trials/
下载后得到文件夹FusionCharts_Evaluation
也可以去\\10.38.142.127的共享文件夹拷贝。
打开DOS命令行，输入\\10.38.142.127，进入“我”的共享文件夹.
目录结构：
现在我们就来看看这个下载包里面都有些什么东西。
>> Charts文件夹，包含所有的swf文件;
常用的图表的SWF文件有：
| 图形类型 |
文件名 |
|
|
|
||
| 柱形3D |
Column3D.swf |
|
| 柱形2D |
Column2D.swf |
|
| 线型 2D |
Line.swf |
|
| 区域图 2D |
Area2D.swf |
|
| 饼图 2D |
Pie2D.swf |
|
| 饼图3D |
Pie3D.swf |
|
| 环图 2D |
Doughnut2D.swf |
|
| 环图3D Doughnut3D.swf |
|
|
>> JSClass文件夹，包含生成图表的JS文件;
有FusionCharts.js和FusionChartsExportComponent.js两个js文件。这些文件能够
使我们将生成的图表嵌入到html/JSP页面。
>> ExportHandlers文件夹，包含图表导出相关jar包，这个在后面讨论导出时再介绍。
>> Code文件夹，存放示例代码：
所有的代码都放在FusionCharts_Evaluation > Code文件夹。
>> Gallery文件夹，主要是图形例子
FC官方提供的一些图形demo，包含xml数据文件。
2. 完成了上面的介绍，我们来实现第一个图表：
为了创建demo图表，我们需要以下几个文件：
>>FusionCharts.js
>> Doughnut3D.xml, Gallery文件夹包含了很多图表示例，Gallery> data目录下有所有
图表的xml数据文件，我们拷贝Doughnut3D.xml，放于WebRoot/fcf/data/目录下。
>> JSP页面
在WebRoot/jsp/目录下创建demo.jsp,内容如下：
介绍完FusionCharts组件包的结构，开始我们的第一个图表展示：
步骤：
1. 在MyEclipse中创建一个web工程，假设命名fc_demo
在工程的根目录WebRoot下创建文件夹fcf,再在fcf下创建三个子文件夹swf、js、data，分别用来存放swf文件、图表相关的js文件、xml文件。
>> 将FusionCharts_Evaluation> Charts下的swf全部拷贝到swf文件夹下
>> FusionCharts_Evaluation> JSClass下的FusionCharts.js和
FusionChartsExportComponent.js拷贝到js文件夹下。
>> 另外从FusionCharts_Evaluation> Gallery > data下拷贝Doughnut3D.xml
注：上面的文件夹命名只是我个人喜好，可以根据需要自行命名。当然，并不是说它一定要这样命名，也不是一定要在根目录下，只是这样命名和部署更规范易于管理。
2． 以上步骤完成后，我们在MyEclipse的WebRoot >jsp目录下新建一个jsp，命名demo0.jsp
JSP页面我们这样写：
<%@ pagelanguage="java" import="java.util.*"pageEncoding="utf-8"%>
<%
//获得web应用根目录
String path =request.getContextPath();
%>
DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript" src =
"<%=path %>/fcf/js/FusionCharts.js">script>
<script type="text/javascript">
//生成图表的js函数
function showFusionCharts()
{
//利用js中的构造方法创建图表对象，第一个参数为swf文件的路径
//参数2为图表ID，参数3、4分别为图表宽和高，后面的参数照搬即可。
var chart = newFusionCharts("<%=path%>/fcf/swf/Doughnut3D.swf",
"myChart", "600", "400", "0", "1");
//设置图表的xml数据源的路径
chart.setDataURL("<%=path %>/fcf/data/Doughnut3D.xml");
//根据id关联DIV，图表要显示在该DIV中
chart.render("chartDIV"); //放置图表的DIV的ID
}
script>
head>
//设置页面加载，每次页面加载就会执行《图表生成函数》
<body onload="showFusionCharts()">
//存放图表的DIV
<div id="chartDIV" align="center">div>
body>
html>
Ok,部署web工程到tomcat服务器，启动tomcat
IE地址栏输入http://localhost:8080/fc_demo/jsp/demo0.jsp回车就可以看到生成的图表了：
当然上面完成的只是一个简单现成的Demo，如果你要展示真实数据的话，还需从后台获取数据，转换为xml格式。
创建第一个图表:
要使用FC来创建图形，你需要做下面三件事情：
创建XML数据文档要做报表，当然要有数据了。
在这个例子里，我们准备展示一年里每个月的销售情况。所有数据看起来就像下面的表格中的一样。
这个文件的内容如下：data.xml
上面的代码里，有一个叫
创建包含图形的HTML/JSP文件
生成的FusionCharts要被放到HTML文件里才能显示。
问题总结：
如果很不幸，你没能在页面上看到如上图表，那么可能是下面的原因之一：
1. swf文件没放到正确的文件夹；
2. 在demo.jsp里，swf的路径设置不正确；
3. 没有安装Flash Player；
4. 如果你得到了一个“Error in Loading Data”的消息，可能是：
Doughnut3D.xml文件没放到正确的文件夹。
Doughnut3D.xml的文件名不正确。比如，你可能不小心把它命名为Doughnut3D.xml.txt。
如果你得到了一个“Invalid XML Data”的消息，可能是;Data.xml里的内容有错误。
介绍包括：
1. My FirstFusionCharts图表
写一个JSP页面，写入如下JS
JSP示例，注释
Copy一份xml过来
XML文件示例，注释
换成其他图表，更换swf文件
失败总结：
2. 导出图表到服务端
拷贝 FusionCharts的properties配置文件到web工程的src目录下
配置properties文件
两种导出方式：JSP和Servlet
Servlet方式更为强大，这里采用Servlet方式
添加两个jar包
由于是Servlet方式，我们要用到FusionCharts官方的Servlet，所以不含糊，配置web.xml文件。
配置data.xml，设置于导出有关的属性
失败总结：经验谈
3. 调节图表样式：API
见pdf，很详细，后面附录也有
4. 如何将后台数据转换为FC能识别的XML数据
JSON
5. 开发人员了解
由于FusionCharts应用环境已经搭建好，所以大家只需知道如何将后台数据转换为FusionCharts能识别的XML数据，以及如何在页面上引用FusionCharts的JS函数创建图表这两点。
FusionCharts基本部署我已经传到SVN的项目上了，配置文件也已经写好了，还有一个chartUtil类，负责生成样式，大家只需按本文的说明在各自模块页面创建图表即可。