本文先介绍 ">FusionCharts Free 及其特性，紧接着详细说明使用 FusionCharts Free 创建图表的过程，以及介绍 ExtJs 在图表展示方面的优缺点，然后详细阐述 FusionCharts Free 与 ExtJs 结合的实现过程，通过具体的实例进行展示，并对实践中遇到的一些问题进行解析。
FushionCharts Free 是一款开源的免费的以 Flash 为支撑来制作数据动画图表的图表组件解决方案，它最大的特性是跨平台、跨浏览器、兼容主流的 Web 技术，通过 XML 作为其数据接口，利用绚丽的 Flash，创建交互式、数据驱动的动态图表。
FusionCharts Free 优点
FushionCharts Free 拥有自身很多的优点：
大量的图表类型
FushionCharts Free 给用户提供多种不同的 2D 或 3D 图表类型，包括柱状图、直方图、直线图、饼图、圆环图、甘特图、漏斗图、堆栈图表、组合图表等，提供用户多种选择，可以很好地满足用户的需求。
良好的动画和交互
FusionCharts Free 在图表设置方面为用户提供了多种选项，例如：是否显示动画效果，透明度，色彩主题，热点选区、盘旋标题，倾斜度，字体，字体显示位置，字体背景，饼图半径 和各饼瓣颜色等，很多属性用户都可以进行个性化设置，使得制作出的图表表现形式丰富，光滑、栩栩如生的动态图像效果与用户有良好的交互。
兼容主流 Web 技术、网络技术，平台和设备
FusionCharts Free 可运行在 Windows、Linux、Unix 等操作系统上。通过 XML 作为数据接口，可兼容 HTML、JavaScript、ASP、ASP.NET、PHP、JSP、ColdFusion 等主流 Web 技术和数据库。充分利用 Flash 和 Javascript，可无缝地在 PC 机、Macs、iPad、iPhone 和其他移动设备上实现。
降低服务器的负载
通 常情况下，显示的图表都是在服务器端生成后再传给客户端，这消耗了服务器的资源和网络带宽。 而 FusionCharts Free 只是将预构建的 SWF 文件和数据文件传给浏览器（客户端），图片渲染等工作由客户端的 Flash 插件完成，极大地减少了服务器端计算负荷和网络传输量。与此同时，浏览器会将 SWF 文件缓存起来，以后只需更新数据，而不是每次都发送图表 SWF 文件。
使用简单，免安装
使用 FusionCharts Free 不需了解太多关于 Flash 的知识，创建图表过程非常便捷，只需拷贝所需的模板 SWF 文件，将显示的数据转换成特定的 XML 格式，最后使用语句通过 Flash 进行展示。
创建 FusionCharts Free 图表
FushionCharts Free 使用 XML 作为数据接口，其制图流程如图 1 所示。
图 1. FusionCharts Free 制作图表流程图
包 含 SWF 文件的图表显示页面向数据提供页面发送数据请求，数据提供页面接收到请求后根据条件连接数据库查询获取源数据，然后返回数据给数据提供页面，数据提供页面 根据具体情况将数据转换成 XML 格式并传送到图表显示界面，图表显示界面通过 Fash 插件对 XML 数据进行解析并展示图表。FusionCharts Free 制作简便，广泛应用在 Web 应用中，下面通过一个基于 Java 的 Web 工程（FusionChartsDemo）创建多柱状图为例（某超市 2012 年度啤酒、尿布和纸巾的销售额）来说明图表的创建过程。
首先，下载 FusionCharts 后解压，找到 FusionCharts.js 文件和需要的.swf 文件（本例以多个 3D 柱状图：MSColumn3D.swf 为例）放到工程 WebRoot 目录下。
其次，在页面中引入 js 文件，代码如下所示：
<script language="JavaScript" src="FusionCharts/JS/FusionCharts.js"></script>
再 次，创建数据源（以 XML 格式为例），分为静态数据和动态数据，静态数据可在工程目录下直接进行创建，动态数据指从服务器端或进行换算获取数据进行字符串拼接，无论静态数据还是动 态数据，创建好的 XML 数据格式如清单 1 所示（本例采用文件名为 DataMulti.xml 静态数据来实现）：
清单 1. XML 数据格式
<graph palette='3' caption='季度销售对比表' xAxisName='季度' yAxisName='销售额（单位：千）' baseFont='Arial' baseFontSize ='14' baseFontColor ='000000' ShowAboutMenuItem='0' decimals='0' formatNumberScale='0' useRoundEdges='1'> <categories> <category label='第 1 季度'/> <category label='第 2 季度'/> <category label='第 3 季度'/> <category label='第 4 季度'/> </categories> <dataset seriesName='啤酒'> <set value='1240' link='chartDemo/detail.do?value=a1'/> <set value='1920' link='chartDemo/detail.do?value=a2'/> <set value='2080' link='chartDemo/detail.do?value=a3'/> <set value='910' link='chartDemo/detail.do?value=a4'/> </dataset><dataset seriesName='尿布'> ......//格式参照“啤酒”设定 </dataset> <dataset seriesName='纸巾'> ......//格式参照“啤酒”设定 </dataset></graph >
如清单 1 所示每个 XML 以<graph >开始，以</graph >结束，<categories></categories>这个标签包含多个子标 签<category ></ category>，用来设置图片横坐标的元素。<dataset >标签代表横坐 标一个元素中拥有的子元素（如本例中，横坐标的第一个元素“第 1 季度”包含啤酒、尿布和纸巾 3 个子元素，那么就有 3 个<dataset >标签），标签中 seriesName 属性将在横坐标下面形成一组图例。<dataset>里的子节点<set>可以用来设置每个具体元素的 属，可见每个标签都拥有自己特有的一些属性。
最后，在页面（FusionCharts.jsp）中调用生成的 XML 格式数据生成图表，代码如清单 2 所示。
清单 2. 调用静态数据源生成图表
<script type="text/javascript"> //本例采用静态数据 DataMulti.xml 为数据源 function showFusionCharts(){ // 用四个参数构建一个 FusionCharts 对象，第 1 个参数是 SWF 文件的地址， //第 2 个是图形的 id，唯一即可，第 3 个是图表的宽，第 4 个是图表的高 var myChart = new FusionCharts("FusionCharts/Charts/MSColumn3D.swf", \ "myChartId", "1000", "800"); //采用静态数据时，设置数据文件的地址 url myChart.setDataURL("DataMulti.xml"); //把图表渲染到指定的容器 myChart.render("chartdiv"); }</script><body onload="showFusionCharts();"><div id="chartdiv"></div></body>
部署项目，启动服务器在网页中输入 http://127.0.0.1:8080/FusionChartsDemo/FusionCharts.jsp 就可以访问刚刚创建好的多个柱状图。
图 2. 季度销售对比图