-
1 知识链接
-
2 任务实现
-
3 同步实训
【问题引入】
随着Web应用程序的广泛应用，经常需要在网页中显示一些图表，这些图表对数据分析和统计结果的呈现有不可替代的作用。在B/S开发模式下，一般通过引入图表组件的方式开发图表，如何在Java Web项目中显示动态数据图表呢？
【实现思路】
基于Flash技术的动态统计图组件FusionCharts Free（以下简称FCF）是目前Web开发中流行的图表组件。FCF是一个跨平台跨浏览器的轻量级Flash图表组件解决方案，能够与任何Web脚本语言一起用于创建和发布动态的、功能强大的图表。FCF充分利用流体美丽的Flash为模板，使用XML作为其数据接口，创造紧凑、互动和真正的动态图表。下面就来重点学习该组件的使用。
【知识链接】
1．FusionCharts Free概述
FusionCharts Free是一个跨平台跨浏览器的轻量级Flash图表组件解决方案，可以用来提供数据驱动的动态图表。通过AdobeFlash，用XML格式的数据输入实现数据展示的图表化、动态化和交互性。用FCF实现图形展示需要Flash图形样式文件、XML文件、FusionCharts.js文件、页面展示文件这四个文件。各类型的文件所起的作用如表6-4所示。
表6-4 使用FusionCharts Free实现图形展示所需文件列表
| 文件 | 作用 |
| Flash图形样式文件（*.swf） | 定义了展示的图形类型（如3D饼图等） |
| XML文件 | 存放图形展示的数据及Flash的样式，以<chart>开头，以</chart>结束；或者以<graph>开头，以</graph>结束 |
| FusionCharts.js文件 | 根据xml文件来设置生成Flash的样式，如图形展示方式、线条颜色、面板颜色、字体大小、字体颜色、是否显示数值、趋势线等 |
| 页面展示文件 | 用于指定*.swf、*.xml和FusionCharts.js的位置生成图形化展示 |
FCF可以通过网络下载。文件不大，共4.22MB。将FCF解压到任意一个目录后，单击目录下的index.html即可打开FCF 的文档。所有的SWF文件（共22个）都在 FusionChartsFree>Charts 文件夹中。如果需要在Web 应用里创建图形，那么就把这些SWF 文件都拷到应用的下面。FusionCharts.js文件放在FusionChartsFree>JSClass 文件夹中。这些文件能够帮你用一种友好的方式把图形嵌入到HTML页面。所有的示例代码都放在FusionChartsFree>Code 文件夹中。
2．应用FusionCharts Free显示图形
FCF采用了图表显示载体（Flash图形样式文件）和图表数据分离的独特工作原理，方便应用程序开发，同时支持静态和动态数据模式生成图表。图6-7所示为FCF显示图表工作模式。其中图表数据采取两种模式获取，模式1通过XML文件获取数据，模式2通过查询数据库动态创建XML文档的方式获取数据。
图6-7 FusionCharts显示图表工作模式
