用FusionCharts构建高效且优雅的图表框架.docx

用 FusionCharts 构建高效且优雅的图表框架分销产品开发团队——冉瑛Fusioncharts 是一个基于 Flash 的图表组件，可以用来提供数据驱动的动态图标，fusioncharts 可用于任何网页脚本语言如， HTML 格式，JSP 技术等等提供交互式和强大的动态图标，fusioncharts 充分利用流体美丽的 Flash 为模板，使用 XML、JSON 作为其数据接口，创造紧凑，互动和真正的动态图表设想所有的图形组成不需要任何的安装，你可以在你的能想到的语言环境中进行工作，并能在多数的浏览器中运行，建立漂亮的、栩栩如生的效果假设你的数据在有限的时间、空间、WEB 内不停的发生改变 FusionCharts 刚好帮助你实现所有想像出来的事物FusionCharts 的特点：（a ）：不需要任何 Active-X 或扩展控件不需要安装任何扩展 Active-X 控件或组件来渲染效果对于服务器不需要安装组件，FusionCharts 能够运行的非常流畅你只需上载核心的 SWF 文件到服务器中并将为其配置XML 数据文件 （b）：栩栩如生的效果可以增加站点美学效果：通过 Active-X 控件或组件制作的图形是静态 GIF 或 JPEG 文件。

但是，通过FusionCharts 就能制作出光滑、栩栩如生的动态图像效果，同时也很方便的为 XML 数据文件自定义附加属性 （c ）：减少服务器负载：FusionCharts 能很大程度地减轻服务器的负荷，相当在客户端处理工作客户端仅仅需要 Macromedia flash 6 播放器，现在来讲非常普通的了，常与游览器的新版本一起推出由于该控件文件非常小，因此也非常适合窄频带传输 （d）：兼容多种脚本语言：FusionCharts 兼容多种脚本语言：如 ASP，ASP.NET,JSP, PHP, Perl, CGI, CF 等，如同在客户端进行处理时，无论是哪一种脚本语言通过数据访问组件都没太大关系该控件能够自定义从文本文件中获取的数据也可以在静态服务器中工作 （文本文件或 XML 文件包含的数据能够被经常更新） （e）：改变客户端动态数据库你可以用客户端中很少的几句脚本来控制 FusionCharts，也能够在客户端中建立全新的图形而不需要重新加载页面和图形 （f）：可在图形中追加其它特征：FusionCharts 提供了自制的很多选项：比如透明度、色彩主题、热点选区、盘旋标题等。

其最大的好处在于你能够利用 XML 数据文件进行自定义FusionCharts 初探下载 FusionChart3.2(最新版) ，将 Chart 下的 swf 文件全部拷到 web 项目下，拷FusionCharts.js 及其它辅助 js 文件到 js 文件夹，建一个 jsp 目录，用于保存页面一个最基本的环境就搭好了下面开始第一个图形报表，使用静态的 XML 作为数据源，尽量简单，只为直观的看到效果在 jsp 下建 data.xml，数据如下：Jsp 下新建 index.jsp（当然静态数据用 html 也可以）, 引入相应的 js 文件，一个最简单的使用是用 js 代码来加载这个图形报表，代码如下：我们对上面的代码进行以下解释我们定义了一个 DIV，它还有个 id图形将出现这个 DIV 里，到时这里的字将被图形替代接着，我们用四个参数建立了一个 FusionCharts 对象，var myChart = new FusionCharts("${path}/fcf/Pie3D.swf", "myChartId", "600", "400");第一个参数是 SWF 文件的地址第二个是图形的 id。

这个 id 你可以随便叫什么，但是要注意，在后面我们讲到一个页面里有多个图形的时候，这个 id 一定要是唯一的第三个参数是图形的宽第四个参数是图形的高我们还要设置数据文件的地址myChart.setDataURL("${path}/jsp/data.xml"); 最后，我们把图形渲染在指定的地方myChart.render("chartdiv"); "chartdiv"就是前面的 DIV 的 id，这就表示把图形 render 到"chartdiv"我们第一个图形报表就完成了，运行效果如下，图形是动态的，鼠标移上去还有相应的提示，当然这些效果都是我们可以改变的要做成其它形状的图形只需要把 Pie3D.swf 变换成其它的，如柱状图 MSColumn3D.swf：还可以是拆线图：FusionCharts 使用进阶看到这我们肯定就清楚了 FusionCharts 的基本使用方法，下面让我们看看 FusionCharts变幻的关键，那就是数据不论用 XML 还是 JSON 作用数据源，我们实际使用肯定数据是动态的，并可根据需要改变参数值，使图形呈现不一样的效果相对 XML 我更喜欢用 JSON 生成数据，虽然很多人不喜欢用 JSON，因为看着数据比较复杂，没有 XML 数据直观，但我的观点正好相反， JSON 数据其实是有规律的就是对象数据的反映，我可以用对象方式直接生成 JSON 数据，至于生成的数据你要去看他干嘛呢？你要看的是输出的图形报表，而不是 JSON 数据。

下面是我做的一个单系列图形 JSON 数据源例子，主要是为了使用对象动态生成 JSON数据先看效果：需要生成的 JSON 格式大概像这样：1. 建立输出 Bean 对象，这些 Bean 的属性只是其中的一部分，我们需要用到什么就写什么，但为了共用性，最好是全部属性都写上需要用就是赋值，不用的不赋值，这当然是最好的public class ChartBean {private String caption;//标题private String xAxisName;//横轴名称private String yAxisName;//纵轴名称private String numberPrefix;//数字前缀private String formatNumberScale; //是否格式化数字, 默认为1(True)private String pieSliceDepth;//饼图厚度private String startingangle;….省略 get set}public class DataBean {private String label;private String value;private String issliced; //是否被切开private String color;//颜色…省略 get set}public class ChartOutBean {private ChartBean chart;private List data;…省略 get set}2. 模拟生成数据的方法： 3. 建一个 servlet 用于调生成数据的方法并根据对象生成 JSON 数据，这里要用到jackson.jar，一个目前 java 生成 json 效率最优的 Json 包。

//来源二：通过对象生成数据ChartOutBean chartOutBean = createChartOutBean();JsonUtil.getJsonGenerator(resp).writeObject(chartOutBean);页面这样使用：生成了我们的需要格式的 json 数据，但页面图形没出来，原因是有的我不想用的属性我们就没有赋值像 dataBean 中的 color，但生成的 json 中成了 color：null, 这肯定是不合法的数据怎么办？4. Jackson 给我们提供了强大的注解功能，有很多可以用上的比如忽略某个字段，字段过滤，日期格式化等，这也是为什么说 Jackson 比较强大的原因我这里要用到的字段过滤器@JsonFilter，根据对象生成 JSON 时，只有当属性有值时才生成，否则忽略此字段在 DataBean 类上加上 @JsonFilter("dataFilter")，在 ChartBean 类上加上@JsonFilter("chartFilter")，写一个 ChartUtil 类，使用反射原理用于过滤对象中为空的属性上代码：使用 JSON 过滤器重新生成 JSON 的方式如下：生成的JSON数据格式如下：{"chart":{"caption":"JSON数据源例子","numberPrefix":"￥","formatNumberScale":"0","pieSliceDepth":"20","startingangle":"20"},"data":[{"label":"星期1","value":"1353","issliced":"0"},{"label":"星期2","value":"2706","issliced":"0"},{"label":"星期3","value":"4059","issliced":"0"},{"label":"星期4","value":"5412","issliced":"0"},{"label":"星期5","value":"6765","issliced":"0"},{"label":"星期6","value":"8118","issliced":"0"},{"label":"星期7","value":"9471","issliced":"1"}]}Ok，成功了！没有值的属性自动过滤掉了，只留下的有值的属性。

这样我们只要把 ChartBean 和 DataBean 的属性完善，全部加入，不需要用的不赋值就行当然这只是个简单的例子，其它还有复杂的多系列图，生成的 JSON 格式更为复杂，都只要在这个基础框架上再加其它对应的 Bean,按自己的需要进行组合即可一旦这个框架成型之后，你会惊喜的发现，现在你要做的只是根据需求获取数据生成不同的 CreateOutBean 了按照这样的思路，在上海易行本地同行系统中进行了应用，下面是自动生成的一个用户当日访问量统计报表属于多系列线形图，相对单系列来说要复杂很多总结：FusionCharts 使用起来很方便，代码非常简洁，而做出来的效果可以说非常炫，有各种动态效果而我们需要关心的如何动态生成数据，而使用 JSON 数据格式，按对象生成数据，就变了获取组装对象，而这对于一个”资深”的 Java 程序员来说是再熟悉不过的一件事情FusionCharts 还有其它很多丰富的功能，包括可以任意旋转的立体图，大家一起来学习吧，它不但是一个工具，更像是一个优雅的妹子，让你的客户看了赏心悦目。