FusionChartsfree使用手册.docx
- 文档编号：8182701
- 上传时间：2023-01-29
- 格式：DOCX
- 页数：70
- 大小：1.13MB
FusionChartsfree使用手册.docx
《FusionChartsfree使用手册.docx》由会员分享，可在线阅读，更多相关《FusionChartsfree使用手册.docx（70页珍藏版）》请在冰豆网上搜索。
FusionChartsfree使用手册
FusionChartsfree使用手册
一、概述
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柱形图
图片1
图片2
曲线图
图片3
图片4
3D/2D饼图、环图
图片5
图片6
区域图
图片7
图片8
堆栈图
图片9
图片10
联合图
图片11
图片12
蜡烛图
图片13
图片14
漏斗图
图片15
图片16
甘特图
图片17
图片18
看了这么多漂亮的图形以后，是不是有点感到兴奋呢？
如果把这么漂亮专业的图形放到用户面前，相信他们也会满意的。
事实上，上面的图形，只是本道的截图，真正的flash图表，在显示时还有优美的动画。
好了，就不在多说了，下篇文章，本道将介绍如何安装使用FusionCharts。
二、下载及安装
下载
你可以在下面的地址下载它。
免费漂亮的Flash图形报表-FusionChartsFreeV2.1下载
文件不大，共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的下载安装以后，现在，我们终于要开始创建我们的第一个图表了。
我们将要创建一个简单的3D柱状图形，用它来展示每月销售情况摘要。
要使用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:
\FusionCharts\FusionCharts\）。
以后，我们所有例子的代码，都要引用这个文件夹下面的SWF文件。
好了，SWF文件就设置好了。
创建XML数据文档
要做报表，当然要有数据了。
在这个例子里，我们准备展示一年里每个月的销售情况。
所有数据看起来就像下面的表格中的一样。
我们知道，FCF只接受XML格式的数据，其他如Excel，CSV，text等都不行。
现在我们按照上表中的数据，做成一个叫Data.xml的XML文件，保存在c:
\FusionCharts\MyFirstChart文件夹下。
这个文件的内容如下：
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
上面的代码里，有一个叫
我们还看到有很多
name属性用来表示月份名称，value属性表示销售额，color属性表示图形颜色。
创建包含图形的HTML文件
每个图形都要被放到HTML文件里才能显示，现在，我们把下面的代码保存c:
\FusionCharts\MyFirstChart\Chart.html文件里。
1.
2.
3.
4.
5.
6. D27CDB6E-AE6D-11cf-96B8-444553540000" codebase= width="600" height="500" id="Column3D" > 7. 8. 9. 10. D27CDB6E-AE6D-11cf-96B8-444553540000" codebase= width="600" height="500" id="Column3D" > 4. 5. 6. 7. 4. 5. 6.
7.
8. var myChart = new FusionCharts（"../FusionCharts/FCF_Column3D.swf", "myChartId", "600", "500"）;
9. myChart.setDataURL（"Data.xml"）;
10. myChart.render（"chartdiv"）;
11.
12.