FusionChartsfree使用手册.docx

1、FusionChartsfree使用手册FusionCharts free 使用手册一、概述FusionCharts是InfoSoft Global公司的一个产品，InfoSoft Global 公司是专业的Flash图形方案提供商，他们还有几款其他的，基于Flash技术的产品，都非常的漂亮。FusionCharts Free则是FusionCharts提供的一个免费版本，虽然免费，功能依然强大，图形类型依然丰富。不得不感叹技术发展的真快，99年的时候，flash刚刚在互联网上流行，那时还只是一个简单的动画软件，编程能力有限。但现在flash几乎无所不能了，图形报表则是它大展手脚的一个领域。F

2、usionCharts free 是一个跨平台，跨浏览器的flash图表组件解决方案，能够被 ASP.NET, ASP, PHP, JSP, ColdFusion, Ruby on Rails, 简单 HTML 页面甚至PPT调用。你不需要知道任何关于flash编程的知识，你只需要知道你所用的编程语言就可以了。FusionCharts free 目前最新版本是v2.1，主要做了以下改动： 增加了使用jsp和Ruby on Rails来集成FusionCharts的代码和文档。 FusionCharts DOM更加容易地把图表加载到你的页面上。 修改了.Net的使用代码和文档。 增加了新的PHP

3、 API ,并修复了一些BUG。 修改了FusionCharts.js ，以便可以支持双引号。（那就是说以前不支持？） 增加了在FusionCharts使用UTF-8编码的示例。 FusionCharts到底能做什么呢？下面就给大家展示一下。3D/2D 柱形图图片1图片2曲线图图片3图片43D/2D饼图、环图图片5图片6区域图图片7图片8堆栈图图片9图片10联合图图片11图片12蜡烛图图片13图片14漏斗图图片15图片16甘特图图片17图片18看了这么多漂亮的图形以后，是不是有点感到兴奋呢？如果把这么漂亮专业的图形放到用户面前，相信他们也会满意的。事实上，上面的图形，只是本道的截图，真正的fl

4、ash图表，在显示时还有优美的动画。好了，就不在多 说了，下篇文章，本道将介绍如何安装使用FusionCharts。二、下载及安装下载你可以在下面的地址下载它。免费漂亮的Flash图形报表-FusionCharts Free V2.1下载文件不大，共4.22M。将FusionCharts Free（以下简称FCF）解压到任意一个目录后，点击目录下的index.html，就可以打开FCF的文档。这份文档我们的网站上也有，地址是http:/ajava.org/demo/fusionchartsfree/。目录结构现在我们就来看看这个下载包里面都有些什么东西。SWF文件（创建图形主要靠它们了）所有的

5、SWF文件（共22个）都在FusionChartsFreeCharts文件夹。如果你需要在你的web应用里创建图形，那么就把这些SWF文件都拷到你的应用下面。FusionCharts JavaScript文件FusionCharts JavaScript文件放在FusionChartsFreeJSClass文件夹。这些文件能够帮你用一种友好的方式把图形嵌入到html页面。示例代码所有的代码都放在FusionChartsFreeCode文件夹。图形例子我们创建了一些图形例子，放在FusionChartsFreeGallery文件夹。你也可以通过文档左边的菜单Sample Charts来访问它。文

6、档文档就放在FusionChartsFreeContents文件夹，你可以直接点击FusionChartsFree下面的index.html来访问。安装了解了下载包的目录结构以后，我们再来看看如何安装FCF到web应用里。只需要两个步骤即可完成安装。1、在你的web应用根目录下新建一个叫FusionCharts的文件夹。当然，并不是说它一定要叫这个名字，也不是一定要在根目录下。2、把所有的SWF文件都拷贝到这个FusionCharts里。这就完成安装了，不再需要其他多余的步骤。当然，有些情况下，并不需要与服务器的交互（比如，你直接使用JavaScript来嵌入，而不用jsp或php。数据也是直

7、接写死在你的JavaScript代码里或xml文件里。），为了学习方便，你也可以把它安装在你的电脑上随便一个地方，比如d:test下。安装步骤和上面的安装一样。SWF接下来介绍SWF文件都分别对应哪种图形。图形类型文件名Single Series Charts Column 3DFCF_Column3D.swfColumn 2D FCF_Column2D.swfLine 2D FCF_Line.swfArea 2D FCF_Area2D.swfBar 2D FCF_Bar2D.swfPie 2D FCF_Pie2D.swfPie 3D FCF_Pie3D.swfDoughnut 2D FCF_

8、Doughnut2D.swfMulti-series Charts Multi-series Column 2D FCF_MSColumn2D.swfMulti-series Column 3DFCF_MSColumn3D.swfMulti-series Line 2DFCF_MSLine.swfMulti-series Bar 2DFCF_MSBar2D.swfMulti-series Area 2DFCF_MSArea2D.swfStacked Charts Stacked Column 3D FCF_StackedColumn3D.swfStacked Column 2DFCF_Stac

9、kedColumn2D.swfStacked Bar 2DFCF_StackedBar2D.swfStacked Area 2D FCF_StackedArea2D.swfCombination ChartsMulti-series Column 3D + Line - Dual Y AxisFCF_MSColumn2DLineDY.swfMulti-series Column 3D + Line - Dual Y AxisFCF_MSColumn3DLineDY.swfFinancial Charts Candlestick ChartFCF_Candlestick.swfFunnel Ch

10、artFunnel Chart FCF_Funnel.swfGantt Chart Gantt Chart FCF_Gantt.swfFCF支持上面的22种图形，对于大部分人来说，都足够了。好了，到现在为止还没有开始真正的编程，大家可能有点急了吧，下篇文章我们就来创建我们的第一个Flash图形报表。三、我的第一个图形在介绍完了FCF的下载安装以后，现在，我们终于要开始创建我们的第一个图表了。我们将要创建一个简单的3D柱状图形，用它来展示每月销售情况摘要。要使用FCF来创建图形，你需要做下面三件事情：1.选择好你要创建的图形类型对应的SWF文件。例如，我们现在要创建的是3D柱状图形，那么我们的S

11、WF文件就是FCF_Column3D.swf。上篇文章已经介绍过了，所有的SWF文件都放在FusionChartsFreeCharts文件夹里。2.XML数据文件。FCF只接受基于XML格式的数据。因此，你需要把你的数据转成XML格式。3.HTML文件。这个HTML文件将包含用来嵌入图形的代码。在我们进行上面的工作之前，我们先要新建一个文件夹。例如，我们创建一个叫c:FusionCharts 的文件夹。以后我们的例子都放到这个里面。对于我们的第一个例子来说，我们将在c:FusionCharts下再建一个叫MyFirstChart的文件夹。设置SWF文件我们还要在c:FusionCharts下建

12、一个叫FusionCharts的文件夹。现在，我们把所有的SWF文件都拷贝到到这个文件下面（c:FusionChartsFusionCharts）。以后，我们所有例子的代码，都要引用这个文件夹下面的SWF文件。好了，SWF文件就设置好了。创建XML数据文档要做报表，当然要有数据了。在这个例子里，我们准备展示一年里每个月的销售情况。所有数据看起来就像下面的表格中的一样。我们知道，FCF只接受XML格式的数据，其他如Excel，CSV，text等都不行。现在我们按照上表中的数据，做成一个叫Data.xml的XML文件，保存在c:FusionChartsMyFirstChart文件夹下。这个文件的内

13、容如下：1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 上面的代码里，有一个叫的root元素，它还有一些属性，用来定义标题，坐标轴，数值格式。我们还看到有很多元素，它用来描述数据。name属性用来表示月份名称，value属性表示销售额，color属性表示图形颜色。创建包含图形的HTML文件每个图形都要被放到HTML文件里才能显示，现在，我们把下面的代码保存c:FusionChartsMyFirstChartChart.html文件里。1. 2. 3. MyFirstFusionCharts 4. 5. 6. 7. 8. 9. 10. 11. 12.

14、 13. 上面的代码，其实就是一个显示flash的简单标记。movie参数值指定我们的SWF文件，即FCF_Column3D.swf。FlashVars参数值用来指定XML文件的路径以及图形的宽和高。看到这里，如果不熟悉在网页里调用Flash的朋友，可能会有点迷惑，因为我们发现有一个embed参数，它的各个值都和param参数的值是一样的，为什么会这样呢？其实，这是为了在不同的浏览器里都能运行Flash的一个解决办法。IE浏览器是使用param参数来运行Flash的，而Netscape则是使用embed参数来运行Flash。因此，为了保证我们的应用能够在大多数浏览器上运行，我们就需要加上emb

15、ed参数，并且值和param完全相同。好了，所有工作都做完了，现在，你可以用IE打开Chart.html，就能看到你的第一个漂亮的Flash图形了。图片1问题如果你很不幸，没有在页面上看到图形，那么可能是下面的原因之一：1.SWF 没有放到正确的文件夹。2.在Chart.html里，SWF的路径设置不正确。3.没有安装Flash Player。4.没有启用浏览器Flash播放选项。如果你得到了一个“Error in Loading Data”的消息，可能是：1.Data.xml文件没放到正确的文件夹。2.Data.xml的文件名不正确。比如，你可能不小心把它命名为Data.xml.txt。如果

16、你得到了一个“Invalid XML Data”的消息，可能是;1.Data.xml里的内容有错误。到这里，第一个图表就做完了，感觉怎么样？你是觉得简单呢，容易呢，还是小Case呢？不过，这里我有个小问题，就是Data.xml里，yAxisName属性如果是中文的话，显示不出来。希望随着教程的继续，我进一步了解FCF以后，可以解决这个小问题，也许它就是BUG。图形转换上面的图形是一个柱形图，如果我们想用同样的数据，以饼图来展示，我们只需要将Chart.html代码中的“FCF_Column3D.swf”改成饼图的SWF文件就可以了，即“FCF_Pie3D.swf”。现在我们再刷新浏览器，看看效

17、果：图片1够酷吧。在接下来的系列文章里，我将介绍使用JavaScript来加载Flash。四、使用JavaScript加载图形在上篇文章里，我们做出了第一个图形报表，我们是直接在HTML里使用和标记来加载图形的。1. 2. . 3. 4. 5. 6. 7. 8. 9. . 10. 实际上，我们还可以使用FCF提供的一个JavaScript类来加载图形。使用JavaScript的方式有几个好处，一是代码量大大减少，特别是当一个页面上有几个图形时。二是代码更加直观。三是可以避免IE出现“单击以激活使用这个控件”的提示。使用JS加载这个JS类文件就在FusionChartsFreeJSClass文件

18、夹下，我们把它拷贝到c:FusionChartsFusionCharts下面。现在，我们把原来的Chart.html复制一份，命名为JSChart.html。这样做是为了避免直接在Chart.html上进行修改，因为以后还要用到Chart.html，下面就是JSChart.html的代码。1. 2. 3. 4. 5. 6. 图形将出现这个DIV里，到时这里的字将被图形替代。 7. 8. varmyChart=newFusionCharts(./FusionCharts/FCF_Column3D.swf,myChartId,600,500); 9. myChart.setDataURL(Data

19、.xml); 10. myChart.render(chartdiv); 11. 12. 13. 我们对上面的代码进行以下解释。首先，我们用下面的语句来加载FusionCharts.js文件。1. 然后，我们定义了一个DIV，它还有个id。1. 图形将出现这个DIV里，到时这里的字将被图形替代。 我们的图形就出现在这个DIV里。接着，我们用四个参数建立了一个FusionCharts对象，1. varmyChart=newFusionCharts(./FusionCharts/FCF_Column3D.swf,myChartId,600,500); 第一个参数是SWF文件的地址。第二个是图形的i

20、d。这个id你可以随便叫什么，但是要注意，在后面我们讲到一个页面里有多个图形的时候，这个id一定要是唯一的。第三个参数是图形的宽。第四个参数是图形的高。我们还要设置数据文件的地址。1. myChart.setDataURL(Data.xml); 最后，我们把图形渲染在指定的地方。1. myChart.render(chartdiv); chartdiv就是前面的DIV的id，这就表示把图形render到chartdiv。现在你运行JSChart.html，你会看到同Chart.html一样的效果。很显然使用JavaScript加载图形，更方便，更直观。多图形有时候我们需要在一个页面里显示多个图形，例如，我们同时以饼图、柱状图、曲线图、区域图四中形式来表现每个月的销售情况，让用户想看哪个就看哪个。怎么加载多个图形呢？很简单，看下面。1. 2. 多图形 3. 4. 5. 6. FirstChartContainerPie3D 7. 8. varmyChart1=newFusionCharts(./FusionCharts/FCF_pie3D.swf,myChartId1,600,400);