用FusionChrts构建高效且优雅的图表框架.docxVIP

用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作用数据源，我们实际使用肯定数据是动态的，并可根