fusioncharts中文帮忙文档.docx

fusioncharts中文帮忙文档.docx

《fusioncharts中文帮忙文档.docx》由会员分享，可在线阅读，更多相关《fusioncharts中文帮忙文档.docx（42页珍藏版）》请在冰豆网上搜索。

fusioncharts中文帮忙文档

FusionCharts是InfoSoftGlobal公司的一个产品，InfoSoftGlobal公司是专业的Flash图形方案提供商，他们还有几款其他的，基于Flash技术的产品，都非常的漂亮。

FusionChartsFree则是FusionCharts提供的一个免费版本，虽然免费，功能依然强大，图形类型依然丰富。

　　不得不感叹技术发展的真快，99年的时候，flash刚刚在互联网上流行，那时还只是一个简单的动画软件，编程能力有限。

但现在flash几乎无所不能了，图形报表则是它大展手脚的一个领域。

　　FusionChartsfree是一个跨平台，跨浏览器的flash图表组件解决方案，能够被ASP.NET,ASP,PHP,JSP,ColdFusion,RubyonRails,简单HTML页面甚至PPT调用。

你不需要知道任何关于flash编程的知识，你只需要知道你所用的编程语言就可以了。

　　FusionChartsfree目前最新版本是v2.1，主要做了以下改动：

　　增加了使用jsp和RubyonRails来集成FusionCharts的代码和文档。

　　FusionChartsDOM更加容易地把图表加载到你的页面上。

　　修改了.Net的使用代码和文档。

　　增加了新的PHPAPI,并修复了一些BUG。

　　修改了FusionCharts.js，以便可以支持双引号。

（那就是说以前不支持？

）

　　增加了在FusionCharts使用UTF-8编码的示例。

　　FusionCharts到底能做什么呢？

下面就给大家展示一下。

　　3D/2D柱形图

　　图片2

　　曲线图

　　图片3

　　图片4

　　3D/2D饼图、环图

　　图片5

　　图片6

　　区域图

　　图片7

　　图片8

　　堆栈图

　　图片看不清楚？

请点击这里查看原图（大图）。

　　图片9

　　图片10

　　联合图

　　图片看不清楚？

请点击这里查看原图（大图）。

　　图片11

　图片12

　　蜡烛图

　　图片看不清楚？

请点击这里查看原图（大图）。

　　图片13

　　图片14

　　漏斗图

　　图片15

　　图片16

　　甘特图

　图片17

　　图片18

　　看了这么多漂亮的图形以后，是不是有点感到兴奋呢？

如果把这么漂亮专业的图形放到用户面前，相信他们也会满意的。

事实上，上面的图形，只是本道的截图，真正的flash图表，在显示时还有优美的动画。

　　好了，就不在多说了，下篇文章，本道将介绍如何安装使用FusionCharts。

文件不大，共4.22M。

将FusionChartsFree（以下简称FCF）解压到任意一个目录后，点击目录下的index.html，就可以打开FCF的文档。

　　这份文档我们的网站上也有，地址是http:

//ajava.org/demo/fusionchartsfree/。

　　目录结构

　　现在我们就来看看这个下载包里面都有些什么东西。

　　SWF文件（创建图形主要靠它们了）

　　所有的SWF文件（共22个）都在FusionChartsFree>Charts文件夹。

如果你需要在你的web应用里创建图形，那么就把这些SWF文件都拷到你的应用下面。

　　FusionChartsJavaScript文件

　　FusionChartsJavaScript文件放在FusionChartsFree>JSClass文件夹。

这些文件能够帮你用一种友好的方式把图形嵌入到html页面。

　　示例代码

　　所有的代码都放在FusionChartsFree>Code文件夹。

　　图形例子

　　我们创建了一些图形例子，放在FusionChartsFree>Gallery文件夹。

你也可以通过文档左边的菜单SampleCharts来访问它。

　　文档

　　文档就放在FusionChartsFree>Contents文件夹，你可以直接点击FusionChartsFree下面的index.html来访问。

　　安装

　　了解了下载包的目录结构以后，我们再来看看如何安装FCF到web应用里。

　　只需要两个步骤即可完成安装。

　　1、在你的web应用根目录下新建一个叫FusionCharts的文件夹。

当然，并不是说它一定要叫这个名字，也不是一定要在根目录下。

　　2、把所有的SWF文件都拷贝到这个FusionCharts里。

　　这就完成安装了，不再需要其他多余的步骤。

　　当然，有些情况下，并不需要与服务器的交互（比如，你直接使用JavaScript来嵌入，而不用jsp或php。

数据也是直接写死在你的JavaScript代码里或xml文件里。

），为了学习方便，你也可以把它安装在你的电脑上随便一个地方，比如d:

\test下。

安装步骤和上面的安装一样。

　　SWF

　　接下来介绍SWF文件都分别对应哪种图形。

图形类型

文件名　

SingleSeriesCharts

Column3D

FCF_Column3D.swf

Column2D

FCF_Column2D.swf

Line2D

FCF_Line.swf

Area2D

FCF_Area2D.swf

Bar2D

FCF_Bar2D.swf

Pie2D

FCF_Pie2D.swf

Pie3D

FCF_Pie3D.swf

Doughnut2D

FCF_Doughnut2D.swf

Multi-seriesCharts

Multi-seriesColumn2D

FCF_MSColumn2D.swf

Multi-seriesColumn3D

FCF_MSColumn3D.swf

Multi-seriesLine2D

FCF_MSLine.swf

Multi-seriesBar2D

FCF_MSBar2D.swf

Multi-seriesArea2D

FCF_MSArea2D.swf

StackedCharts

StackedColumn3D

FCF_StackedColumn3D.swf

StackedColumn2D

FCF_StackedColumn2D.swf

StackedBar2D

FCF_StackedBar2D.swf

StackedArea2D

FCF_StackedArea2D.swf

CombinationCharts

Multi-seriesColumn3D+Line-DualYAxis

FCF_MSColumn2DLineDY.swf

Multi-seriesColumn3D+Line-DualYAxis

FCF_MSColumn3DLineDY.swf

FinancialCharts

CandlestickChart

FCF_Candlestick.swf

FunnelChart

FunnelChart

FCF_Funnel.swf

GanttChart

GanttChart

FCF_Gantt.swf

　　FCF支持上面的22种图形，对于大部分人来说，都足够了。

　　好了，到现在为止还没有开始真正的编程，大家可能有点急了吧，下篇文章我们就来创建我们的第一个Flash图形报表。

要使用FCF来创建图形，你需要做下面三件事情：

　　1.选择好你要创建的图形类型对应的SWF文件。

例如，我们现在要创建的是3D柱状图形，那么我们的SWF文件就是FCF_Column3D.swf。

上篇文章已经介绍过了，所有的SWF文件都放在FusionChartsFree>Charts文件夹里。

　　2.XML数据文件。

FCF只接受基于XML格式的数据。

因此，你需要把你的数据转成XML格式。

　　3.HTML文件。

这个HTML文件将包含用来嵌入图形的代码。

　　在我们进行上面的工作之前，我们先要新建一个文件夹。

例如，我们创建一个叫c:

FusionCharts的文件夹。

以后我们的例子都放到这个里面。

　　对于我们的第一个例子来说，我们将在c:

FusionCharts下再建一个叫MyFirstChart的文件夹。

　　设置SWF文件

　　我们还要在c:

FusionCharts下建一个叫FusionCharts的文件夹。

现在，我们把所有的SWF文件都拷贝到到这个文件下面（c:

FusionChartsFusionCharts）。

以后，我们所有例子的代码，都要引用这个文件夹下面的SWF文件。

　　好了，SWF文件就设置好了。

　　创建XML数据文档

　　要做报表，当然要有数据了。

在这个例子里，我们准备展示一年里每个月的销售情况。

所有数据看起来就像下面的表格中的一样。

　　我们知道，FCF只接受XML格式的数据，其他如Excel，CSV，text等都不行。

　　现在我们按照上表中的数据，做成一个叫Data.xml的XML文件，保存在c:

FusionChartsMyFirstChart文件夹下。

这个文件的内容如下：

　1　　

　2　　　　

　3　　　　

　4　　　　

　5　　　　

　6　　　　

　7　　　　

　8　　　　

　9　　　　

10　　　　

11　　　　

12　　　　

13　　　　

14　

上面的代码里，有一个叫的root元素，它还有一些属性，用来定义标题，坐标轴，数值格式。

我们还看到有很多元素，它用来描述数据。

name属性用来表示月份名称，value属性表示销售额，color属性表示图形颜色。

　　创建包含图形的HTML文件

　　每个图形都要被放到HTML文件里才能显示，现在，我们把下面的代码保存c:

FusionChartsMyFirstChartChart.html文件里。

　　　　　　　

D27CDB6E-AE6D-11cf-96B8-444553540000"codebase=width="600"height="500"id="Column3D">　　

D27CDB6E-AE6D-11cf-96B8-444553540000"codebase=width="600"height="500"id="Column3D">　　

　　　图形将出现这个DIV里，到时这里的字将被图形替代。