FusionChartsfree使用手册Word格式.docx
《FusionChartsfree使用手册Word格式.docx》由会员分享，可在线阅读，更多相关《FusionChartsfree使用手册Word格式.docx（70页珍藏版）》请在冰豆网上搜索。
图片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
FCF_MSColumn3DLineDY.swf
FinancialCharts
CandlestickChart
FCF_Candlestick.swf
FunnelChart
FunnelChart
FCF_Funnel.swf
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.<
graph
caption='
每月销售额柱形图'
xAxisName='
月份'
yAxisName='
Units'
showNames='
1'
decimalPrecision='
0'
formatNumberScale='
>
2.
<
set
name='
一月'
value='
462'
color='
AFD8F8'
/>
3.
二月'
857'
F6BD0F'
4.
三月'
671'
8BBA00'
5.
四月'
494'
FF8E46'
6.
五月'
761'
008E8E'
7.
六月'
960'
D64646'
8.
七月'
629'
8E468E'
9.
八月'
622'
588526'
10.
九月'
376'
B3AA00'
11.
十月'
008ED6'
12.
十一月'
9D080D'
13.
十二月'
A186BE'
14.<
/graph>
上面的代码里，有一个叫<
graph>
的root元素，它还有一些属性，用来定义标题，坐标轴，数值格式。
我们还看到有很多<
set>
元素，它用来描述数据。
name属性用来表示月份名称，value属性表示销售额，color属性表示图形颜色。
创建包含图形的HTML文件
每个图形都要被放到HTML文件里才能显示，现在，我们把下面的代码保存c:
\FusionCharts\MyFirstChart\Chart.html文件里。
html>
head>
title>
My
First
FusionCharts<
/title>
/head>
body
bgcolor="
#ffffff"
OBJECT
classid="
clsid:
D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase=
width="
600"
height="
500"
id="
Column3D"
param
name="
movie"
value="
../FusionCharts/FCF_Column3D.swf"
FlashVars"
&
dataURL=Data.xml&
chartWidth=600&
chartHeight=500"
quality"
high"
embed
src="
flashVars="
quality="
type="
application/x-shockwave-flash"
pluginspage="
/object>
12.<
/body>
13.<
/html>
上面的代码，其实就是一个显示flash的简单标记。
movie参数值指定我们的SWF文件，即FCF_Column3D.swf。
FlashVars参数值用来指定XML文件的路径以及图形的宽和高。
看到这里，如果不熟悉在网页里调用Flash的朋友，可能会有点迷惑，因为我们发现有一个embed参数，它的各个值都和param参数的值是一样的，为什么会这样呢？
其实，这是为了在不同的浏览器里都能运行Flash的一个解决办法。
IE浏览器是使用param参数来运行Flash的，而Netscape则是使用embed参数来运行Flash。
因此，为了保证我们的应用能够在大多数浏览器上运行，我们就需要加上embed参数，并且值和param完全相同。
好了，所有工作都做完了，现在，你可以用IE打开Chart.html，就能看到你的第一个漂亮的Flash图形了。
问题
如果你很不幸，没有在页面上看到图形，那么可能是下面的原因之一：
1.SWF没有放到正确的文件夹。
2.在Chart.html里，SWF的路径设置不正确。
3.没有安装FlashPlayer。
4.没有启用浏览器Flash播放选项。
如果你得到了一个“ErrorinLoadingData”的消息，可能是：
1.Data.xml文件没放到正确的文件夹。
2.Data.xml的文件名不正确。
比如，你可能不小心把它命名为Data.xml.txt。
如果你得到了一个“InvalidXMLData”的消息，可能是;
1.Data.xml里的内容有错误。
到这里，第一个图表就做完了，感觉怎么样？
你是觉得简单呢，容易呢，还是小Case呢？
不过，这里我有个小问题，就是Data.xml里，yAxisName属性如果是中文的话，显示不出来。
希望随着教程的继续，我进一步了解FCF以后，可以解决这个小问题，也许它就是BUG。
图形转换
上面的图形是一个柱形图，如果我们想用同样的数据，以饼图来展示，我们只需要将Chart.html代码中的“FCF_Column3D.swf”改成饼图的SWF文件就可以了，即“FCF_Pie3D.swf”。
现在我们再刷新浏览器，看看效果：
够酷吧。
在接下来的系列文章里，我将介绍使用JavaScript来加载Flash。
四、使用JavaScript加载图形
在上篇文章里，我们做出了第一个图形报表，我们是直接在HTML里使用<
OBJECT>
和<
EMBED>
标记来加载图形的。
2....
9....
10.<
实际上，我们还可以使用FCF提供的一个JavaScript类来加载图形。
使用JavaScript的方式有几个好处，一是代码量大大减少，特别是当一个页面上有几个图形时。
二是代码更加直观。
三是可以避免IE出现“单击以激活使用这个控件”的提示。
使用JS加载
这个JS类文件就在FusionChartsFree>
JSClass文件夹下，我们把它拷贝到c:
\FusionCharts\FusionCharts下面。
现在，我们把原来的Chart.html复制一份，命名为JSChart.html。
这样做是为了避免直接在Chart.html上进行修改，因为以后还要用到Chart.html，
下面就是JSChart.html的代码。
script
language="
JavaScript"
../FusionCharts/FusionCharts.js"
/script>
5.<
div
chartdiv"
align="
center"
图形将出现这个DIV里，到时这里的字将被图形替代。
/div>
text/javascript"
var
myChart
=
new
FusionCharts（"
"
myChartId"
）;
myChart.setDataURL（"
Data.xml"
myChart.render（"
我们对上面的代码进行以下解释。
首先，我们用下面的语句来加载FusionCharts.js文件。
然后，我们定义了一个DIV，它还有个id。
我们的图形就出现在这个DIV里。
接着，我们用四个参数建立了一个FusionCharts对象，
1.var
第一个参数是SWF文件的地址。
第二个是图形的id。
这个id你可以随便叫什么，但是要注意，在后面我们讲到一个页面里有多个图形的时候，这个id一定要是唯一的。
第三个参数是图形的宽。
第四个参数是图形的高。
我们还要设置数据文件的地址。
1.myChart.setDataURL（"
最后，我们把图形渲染在指定的地方。
1.myChart.render（"
就是前面的DIV的id，这就表示把图形render到"
。
现在你运行JSChart.html，你会看到同Chart.html一样的效果。
很显然使用JavaScript加载图形，更方便，更直观。
多图形
有时候我们需要在一个页面里显示多个图形，例如，我们同时以饼图、柱状图、曲线图、区域图四中形式来表现每个月的销售情况，让用户想看哪个就看哪个。
怎么加载多个图形呢？
很简单，看下面。
2.<
多图形<
4.<
chartdiv1"
Chart
Container
Pie
3D<
myChart1
../FusionCharts/FCF_pie3D.swf"
myChartId1"
400"
升级会员 