FusionCharts_free_使用手册

《FusionCharts_free_使用手册》由会员分享，可在线阅读，更多相关《FusionCharts_free_使用手册（109页珍藏版）》请在装配图网上搜索。

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

2、跨平台，跨浏览器的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 API ,并修复了一些 BUG噜改了 F

3、usionCharts.js ,以便可以支持双引号。（那就是说以前不支持？） 增加了在FusionCharts使用UTF-8编码的示例。FusionCharts到底能做什么呢？下面就给大家展示一下3D/2D柱形图UJHH匚5里55Top 5 Sal Per44kin图片1曲线图UHLRJRVR.ORG图片2Fusioncharts FREE Multi-series Line Chart图片4Oailv Visits (from /6/2006 to 8/12/2006)8/6/2006S/7/2006S/S/2006offline Mirlcaidng1八( V8/9/20068”。，少华6

4、/11/200fi/12/2006Search *PaidSAjrch WSwJ 尸N/FR . 3 HFC3图片3,.,.学，.，*，?，产，. ；： -* _.r ，FkJFIWFmRlk3D/2D饼图、环图Fusioncharts FREE - Pie 3D ChartSjIs Per Employee for yajr 1Q96Fuller, 187,790Buchanan,小21,637Suyama $22j474LcsfIM5 $100,524King, $W43UDcdsworth, 143,962Callahan,图片5区域图40U图片6Fusioncharts FREE -

5、Area 2D ChartLitchiQrang 电MmngoFruitFmit Production for M4ixh (in Millions)若口亡/noRJRVR.ORG图片7FMFRVRQRG堆栈图图片8Fusioncharts FREE - Stacked Column 3D Chart图片10hljriifrt ActJuityo 08 68 6W1GU 号，图片9联合图Fusioncharts FREE - Column Line 2D Combination Chart图片iiDnc-LInDB蜡烛图It图片12Fusioncharts FREE - Candlestick

6、 ChartKYZ - 3 MonthsRI127漏斗图i -I- +2006图片13S2$23图片14HJRVR.DRCjFusioncharts FREE - Funnel Chart图片16Website Visits, 363,634Interested to buy. 34P554Contract finalized,. 35,654图片15甘特图Fusioncharts FREE - Gantt ChartKAMachine Operation Sheet|V|cILfI IIIWeek!Week2WeekOWeek4Week5Machine AMachine BMachine C

7、Machine DMachine EMachine FMachine GIn Ussj 18/1/2005 - 26/1/2C05Machine HLHJRVH.ORG图片17图片18flash 图看了这么多漂亮的图形以后，是不是有点感到兴奋呢？如果把这么漂亮专业的图形放到用户面前，相信他们也会满意的。事实上，上面的图形，只是本道的截图，真正的 表，在显示时还有优美的动画。好了，就不在多 说了，下篇文章，本道将介绍如何安装使用FusionCharts、下载及安装下载你可以在下面的地址下载它。免费漂亮的Flash图形报_表-FusionCharts Free V2.1下载index.html ,

8、就可以打开 FCF的文档文件不大，共4.22M。将FusionCharts Free （以下简称FCF）解压到任意一个目录后，点击目录下的这份文档我们的网站上也有，地址是 http:/ajava.org/demo/fusionchartsfree/目录结构现在我们就来看看这个下载包里面都有些什么东西。SWF 文件 （创建图形主要靠它们了）所有的 SWF 文件（共 22 个）都在 FusionChartsFreeCharts 文件夹。如果你需要在你的 web 应用里创建图形，那么就把这些SWF 文件都拷到你的应用下面。FusionCharts JavaScript 文件FusionCharts

9、JavaScript文件放在FusionChartsFreeJSClass文件夹。这些文件能够帮你用一种友好的方式把图形嵌入到html页面。示例代码所有的代码都放在 FusionChartsFreeCode 文件夹。图形例子我们创建了一些图形例子，放在 FusionChartsFreeGallery文件夹。你也可以通过文档左边的菜单Sample Charts来访问它。文档文档就放在FusionChartsFreeContents文件夹，你可以直接点击FusionChartsFree下面的index.html来访问。安装了解了下载包的目录结构以后，我们再来看看如何安装 FCF 到 web 应用里

10、。只需要两个步骤即可完成安装。1 、在你的 web 应用根目录下新建一个叫 FusionCharts 的文件夹。当然，并不是说它一定要叫这个名字，也不是一定要在根目录下。2 、把所有的SWF 文件都拷贝到这个FusionCharts 里。这就完成安装了，不再需要其他多余的步骤。当然，有些情况下，并不需要与服务器的交互（比如，你直接使用JavaScript来嵌入，而不用jsp或php。数据也是直接写死在你的JavaScript代码里或xml文件里。），为了学习方便，你也可以把它安装在你的电脑上随便一个地方，比如 d:test 下。安装步骤和上面的安装一样。SWF接下来介绍SWF文件都分别对应哪种

11、图形图形类型文件名Single Series ChartsColumn 3DFCF_Column3D.swfColumn 2DFCF_Column2D.swfLine 2DFCF_Line.swfArea 2DFCF_Area2D.swfBar 2DFCF_Bar2D.swfPie 2DFCF_Pie2D.swfPie 3DFCF_Pie3D.swfDoughnut 2DFCF_Doughnut2D.swfMulti-series ChartsMulti-series Column 2DFCF_MSColumn2D.swfMulti-series Column 3DFCF_MSColumn3D

12、.swfMulti-series Line 2DFCF_MSLine.swfMulti-series Bar 2DFCF_MSBar2D.swfMulti-series Area 2DFCF_MSArea2D.swf一Stacked ChartsStacked Column 3DFCF_StackedColumn3D.swfStacked Column 2DFCF_StackedColumn2D.swfStacked Bar 2DFCF_StackedBar2D.swfStacked Area 2DFCF_StackedArea2D.swfMulti-series Column 3D + Li

13、ne - Dual Y AxisFCF_MSColumn2DLineDY .swfMulti-series Column 3D + Line - Dual Y AxisFCF_MSColumn3DLineDY .swfFinancial ChartsCandlestick ChartFCF_Candlestick.swfFunnel ChartFunnel ChartFCF_Funnel.swfGantt ChartGantt ChartFCF_Gantt.swfCombination ChartsFCF支持上面的22种图形，对于大部分人来说，都足够了。好了，到现在为止还没有开始真正的编程，大

14、家可能有点急了吧，下篇文章我们就来创建我们的第一个Flash图形报表。三、我的第一个图形在介绍完了 FCF的下载安装以后，现在，我们终于要开始创建我们的第一个图表了。我们将要创建一个简单的3D柱状图形，用它来展示每月销售情况摘要。要使用FCF来创建图形，你需要做下面三件事情：1.选择好你要创建的图形类型对应的SWF文件。例如，我们现在要创建的是3D柱状图形，那么我们的文件者B放在FusionChartsFreeCharts文件夹里。SWF文件就是FCF_Column3D.swf。上篇文章已经介绍过了，所有的 SWF2 .XML数据文件。FCF只接受基于XML格式的数据。因此，你需要把你的数据转

15、成3 .HTML文件。这个HTML文件将包含用来嵌入图形的代码。在我们进行上面的工作之前，我们先要新建一个文件夹。例如，我们创建一个叫XML格式。c:FusionCharts的文件夹。以后我们的例子都放到这个里面。对于我们的第一个例子来说，我们将在c:FusionCharts下再建一个叫 MyFirstChart的文件夹。设置 SWF 文件) 。以后，我们所有例子的代我们还要在 c:FusionCharts 下建一个叫 FusionCharts 的文件夹。现在，我们把所有的 SWF 文件都拷贝到到这个文件下面(码，都要引用这个文件夹下面的 SWF 文件。好了， SWF 文件就设置好了。创建 X

16、ML 数据文档要做报表，当然要有数据了。在这个例子里，我们准备展示一年里每个月的销售情况。所有数据看起来就像下面的表格中的一样。我们知道， FCF 只接受 XML 格式的数据，其他如 Excel ， CSV ， text 等都不行。现在我们按照上表中的数据，做成一个叫 Data.xml 的 XML 文件，保存在c:FusionChartsMyFirstChart 文件夹下。这个文件的内容如下：1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 元素，它用来描述数据。name属性用来表示月份名称,上面的代码里，有一个叫 的root元素，它还有一些属性，用

17、来定义标题，坐标轴，数值格式。我们还看到有很多value 属性表示销售额， color 属性表示图形颜色。创建包含图形的 HTML 文件每个图形都要被放到 HTML 文件里才能显示，现在，我们把下面的代码保存c:FusionChartsMyFirstChartChart.html 文件里。1. 2. 3. My First FusionCharts4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 上面的代码，其实就是一个显示 flash 的简单标记。movie参数值指定我们的 SWF文件，即FCF_Column3D.swf。FlashVars参数值用来指定 XML文件的路径以

18、及图形的宽和高。看到这里，如果不熟悉在网页里调用Flash的朋友，可能会有点迷惑，因为我们发现有一个embed参数，它的各个值都和param参数的值是一样的，为什么会这样呢？其实，这是为了在不同的浏览器里都能运行Flash的一个解决办法。IE浏览器是使用param参数来运行Flash的，而Netscape则是使用embed参数来运行Flash。因此，为了保证我们的应用能够在大多数浏览器上运行，我们就需要加上embed 参数，并且值和param 完全相同。好了，所有工作都做完了，现在，你可以用 IE 打开 Chart.html ，就能看到你的第一个漂亮的 Flash 图形了。丹帕稽柱分19问题如

19、果你很不幸，没有在页面上看到图形，那么可能是下面的原因之一:1.SWF没有放到正确的文件夹。2 .在Chart.html里，SWF的路径设置不正确。3 .没有安装 Flash Player。4 .没有启用浏览器Flash播放选项。如果你得到了一个Erro门n Loading Data的消息，可能是:I.Data.xml文件没放到正确的文件夹。2.Data.xml的文件名不正确。比如，你可能不小心把它命名为Data.xml.txt如果你得到了一个“Invalid XML Data的消息，可能是；I.Data.xml里的内容有错误。到这里，第一个图表就做完了，感觉怎么样？你是觉得简单呢，容易呢，还

20、是小Case 呢？不过，这里我有个小问题，就是 Data.xml里，yAxisName属性如果是中文的话，显示不出来。希望随着教程的继续，我进一步了解FCF以后，可以解决这个小问题，也许它就是BUG。图形转换上面的图形是一个柱形图，如果我们想用同样的数据，以饼图来展示，我们只需要将Chart.html代码中的“FCF_Column3D.swf改成饼图的SWF文件就可以了，即“FCF_Pie3D.swT现在我们再刷新浏览器，看看效果：l zf_1r il I i v I 1. i. J I : g图片1够酷吧。在接下来的系列文章里,我将介绍使用JavaScript来加载Flash四、使用Java

21、Script加载图形在上篇文章里，我们做出了第一个图形报表，我们是直接在HTML里使用OBJECT和EMBED标记来力口载图形的1. 1.1. .3. 4. vparam name=movie value=./FusionCharts/FCF_Column3D.swf /5. vparam name=FlashVars value=&dataURL=Data.xml&chartWidth=600&chartHeight=5006. vparam name=quality value=high /7. 8. 9. .10. 实际上，我们还可以使用FCF提供的一个JavaScript类来加载图形。

22、使用 JavaScript的方式有几个好处，一是代码量大大减少，特别是当一个页面上有几个图形时。二是代码更加直观。三是可以避免IE出现 单击以激活使用这个控件”的提示。使用JS加载这个JS类文件就在FusionChartsFreeJSClass文件夹下，我们把它拷贝到c:FusionChartsFusionCharts下面。现在，我们把原来的 Chart.html复制一份，命名为 JSChart.html。这样做是为了避免直接在Chart.html上进行修改，因为以后还要用到Chart.html,下面就是JSChart.html的代码。1. html2. 3. 4. 5. 6. 图形将出现这个

23、 DIV里，到时这里的字将被图形替代。7. 8. var myChart = new FusionCharts(./FusionCharts/FCF_Column3D.swf, myChartId, 600, 500);9. myChart.setDataURL(Data.xml);10. myChart.render(chartdiv);11. 12. 13. 我们对上面的代码进行以下解释。首先，我们用下面的语句来加载 FusionCharts.js文件。1. 然后，我们定义了一个 DIV,它还有个id。1. 图形将出现这个 DIV里，到时这里的字将被图形替代。我们的图形就出现在这个 DIV

24、里。接着，我们用四个参数建立了一个 FusionCharts对象，1. var myChart = new FusionCharts( ./FusionCharts/FCF_Column3D.swf , myChartId , 600 , 500);第一个参数是SWF文件的地址。第二个是图形的id。这个id你可以随便叫什么，但是要注意，在后面我们讲到一个页面里有多个图形的时候，这个id 一定要是唯一的第三个参数是图形的宽。第四个参数是图形的高。我们还要设置数据文件的地址。1. myChart.setDataURL( Data.xml);最后，我们把图形渲染在指定的地方。1. myChart.r

25、ender( chartdiv );chartdiv就是前面的 DIV的id,这就表示把图形 render至U chartdiv。现在你运行JSChart.html,你会看到同Chart.html 一样的效果。很显然使用JavaScript加载图形，更方便，更直观。多图形有时候我们需要在一个页面里显示多个图形，例如，我们同时以饼图、柱状图、曲线图、区域图四中形式来表现每个月的销售情况，让用户想看哪个就看哪个 怎么加载多个图形呢？很简单，看下面。2. 3. 多图形 4. 5. 6. 7. First Chart Container Pie 3D8. 9. var myChart1 = new F

26、usionCharts(./FusionCharts/FCF_pie3D.swf, myChartId1, 600, 400);10. myChart1.setDataURL(Data.xml);11. myChart1.render(chartdiv1);12. 13.14. Second Chart Container Column 3D 15. 16. var myChart2 = new FusionCharts(./FusionCharts/FCF_Column3D.swf,myChartId2, 600,300);17. myChart2.setDataURL(Data.xml);

27、18. myChart2.render(chartdiv2);19. 21. Third Chart Container Line 2D22. 23. var myChart3 = new FusionCharts(./FusionCharts/FCF_line.swf, myChartId3, 600, 300);24. myChart3.setDataURL(Data.xml);25. myChart3.render(chartdiv3);26. 27.28. Fourth Chart Container Area 2D29. 30. var myChart4 = new FusionCh

28、arts(./FusionCharts/FCF_area2D.swf, myChartId4, 400, 250);31. myChart4.setDataURL(Data.xml);32. myChart4.render(chartdiv4);33. 34. 35. 36.仔细对比上面的四个图形代码，其实就是div的id, FusionCharts对象的名称，图形的id,还有图形的SWF地址这些地方发生了变化。最后的效果如下:下篇文章本道将讲述如何使用非独立的数据文件作为数据来源。五、使用dataXML加载数据在前面的例子里，我们使用的数据都是一个单独的我们就可以使用dataXML方法来进行

29、数据的调用。XML使用dataXML提供数据图片1文件，它可以被很多需要它的文件来调用。但是有的时候，我们可能不需要单独的文件，这时,dataXML和dataURL都可以提供数据，dataURL是以把XML文件地址以URL的形式告诉FCF,如一个静态的文件 Data.xml ,或者是一个动态的文件，如 XML格式的文本）。dataXML则是以XML文本的形式告诉FCF。可能有点不好理解，看看下面的代码就知道了。mydata.jsp （页面返回1. 2. 3. 4. 5. param name=FlashVars value=&dataXML=6. 7. embed src=./FusionCh

30、arts/FCF_Column3D.swf?chartWidth=600&chartHeight=500 flashVars=&dataXML= quality=high width=600 height=500 name=Column3D type=application/x-shoc kwave-flash pluginspage= /8. 9. 10. 我们把上面的代码保存到一个叫ChartDataXML.html的文件里。可以看到，FlashVars的值是这样的一种形式：在EMBED 标记里，是这样的：而原来我们放到 FlashVars的两个参数-chartWidth , chartH

31、eight,则被放到了 SWF文件地址的后面。使用 JavaScript 和 dataXML看下面的代码。1. 2. 3. 4. 5. 6.7. The chart will appear within this DIV. This text will be replaced by the chart.8. 9. var myChart = new FusionCharts(./FusionCharts/FCF_Column3D.swf, myChartId, 600, 500);10. myChart.setDataXML( );11.12. myChart.render(chartdiv)

32、;13. 14.15. 16. 17.原来我们调用的是setDataURL()方法，而现在是setDataXML()方法，它的参数则是一个完整的XML字符串不管我们使用什么方法，我们都能得到一样的结果。setDataXML()方法的问题XML字符过长，可能会产生问题。这时我们就需要使用setDataURL()方法。我们知道，在使用 GET方法得到参数时，浏览器对参数值的长度是有一定的限制的，所以，如果如果你的XML字符里含有双字节字符，例如中文字符，你就不能使用setDataXML()方法，你应该使用setDataURL()方法。最佳模式在我们的实际应用里，数据不可能是静态的，它可能是有用户选

33、择查询条件，然后提交给服务器，服务器返回一个查询的结果，比如search.jsp?year=200&所以我给大家推荐的最佳模式是使用setDataURL()方法，并且使用JavaScript来加载图形。 在使用setDataURL()方法时，如果地址里含有“?： &等字符，你就需要对这个地址进行URL编码。在JavaScript里进行编码，使用escape(url)这个函数。如果你想在服务器端就进行编码，那就使用你的编程语言提供的URL编码方法。在java里进行编码的函数是.URLEncoder.encode()。六、图形的基本元素在我们了解了 FCF的各种使用方法以后，我们就会发现，其实我们

34、要做出各种不同的Flash图形，最关键的就是那个 XML数据。它不但可以描述图形的数据，还可以描述图形的样式。大家可能迫不及待的想要了解 XML的细节，别急，在此之前，我们需要搞清楚图形的组成部分，比如什么是X轴，什么是丫轴，什么是图形背景，什么是是图形边框。只有了解这些以后，我们才能做出我们相应的图形。图形背景和画布ChartCanvas -BackgroundChart BackgroundChartCanvasBase对于3D图形，你可以设置 canvas background (画布背景)和 Chart Background (图形背景)的颜色，还可以设置它们是否可见Chart Can

35、vasCanvas对于2D图形，你可以设置 canvas background color （画布背景颜色），background alpha （背景透明度），canvas border color （画布边框颜色），canvas border thickness （画布边框厚度） 等属性。Chart Labels (图形标签)Y-axismaxvalueChert CaptionNumber qPrefix -3Y-Axis MameIIEJFY- axis min va lueY-axis_ name 一 盅CumuliitWe 曲.(Frm Dvc ) to DrC M)Sub CSOt

36、ionChartLegendPmdMEl products Products Pedud *roduciS C*ftcl4lCategory/x-sxisnames,number Prefix你可以设置 caption （标题），sub caption （子标题），x-axis name （X 轴标签），y-axis name （丫轴标签），y-axis max limit （丫 轴最大值）,y-axis min limit （丫 轴最小值） （数值前缀），number Suffix （数值后缀），Chart Legend （图例）。DIV lines （刻度线）2J0MB%TiiwAAi1a

37、 Honq IComq PhilippineTh jilbfi JIhidiCcvnbir你可以设置Trend Line （趋势线），Zero Plane （零平面），Div Line （刻度线）等的一些属性。Alternating （间隔色）你可以设置 Alternating Colored Horizontal Grids（垂直表格间隔色）以及透明度， Alternating Colored Vertical Grids （水平表格间隔色）以及透明度Hover Caption （提示信息）Hover Caption BoxProduct5r $20-0Hover Caption Separ

38、ator Character你可以设置 hover caption background-提示框的背景，hover caption border 提示框的边框，hover caption data separator character-提示信息的分割字符。Anchors （锚点）AnchorsmoMK EOM/Z Z寻二 TOM/ZI 10tH n彘 TOM/S你可以设置 Anchors （锚点）的 shape （形X大）,radius （半彳H） , border color （边框颜色），thickness （边框厚度），alpha （边框透明度），background color （背

39、景颜色），background alpha （背景透明度）等属性。FCF 的 XML本章我们了解了一些图形基本构成元素，还了解了我们可以对它们进行哪些设置。下章我们将介绍一下七、 FusionCharts Free 和 XMLFusionCharts 使用 XML 来创建和控制图形。数据类型在 FCF 里，一共有四种数据类型。Boolean -它的值为 0或 1, 1 表示 true, 0 表示 false。区J如 。Number - 它的值应该是一个数值。例如 。String - 它的值是一个字符串。例如 。Hex Color Code - 它表示一个16 进制的颜色，不需要用“ #。例如” 。每个图形都有很多属性，我们都可以通过 XML 对它进行设置，但是，我们并不需要对每一个属性都进行设置，因为它们都有一个默认值，如果我们没有设置， FCF 会