FusionCharts Free使用文档教程第三章-FusionCharts Free我的第一个图形

在介绍完了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文件夹下。这个文件的内容如下:

  

Data.xml
<graph caption='每月销售额柱形图' xAxisName='月份' yAxisName='Units' showNames='1' decimalPrecision='0' formatNumberScale='0'>
<set name='一月' value='462' color='AFD8F8'/>
<set name='二月' value='857' color='F6BD0F'/>
<set name='三月' value='671' color='8BBA00'/>
<set name='四月' value='494' color='FF8E46'/>
<set name='五月' value='761' color='008E8E'/>
<set name='六月' value='960' color='D64646'/>
<set name='七月' value='629' color='8E468E'/>
<set name='八月' value='622' color='588526'/>
<set name='九月' value='376' color='B3AA00'/>
<set name='十月' value='494' color='008ED6'/>
<set name='十一月' value='761' color='9D080D'/>
<set name='十二月' value='960' color='A186BE'/>
</graph>

 

 

上面的代码里,有一个叫<graph>的root元素,它还有一些属性,用来定义标题,坐标轴,数值格式。我们还看到有很多<set>元素,它用来描述数据。name属性用来表示月份名称,value属性表示销售额,color属性表示图形颜色。

创建包含图形的HTML文件

每个图形都要被放到HTML文件里才能显示,现在,我们把下面的代码保存c:\FusionCharts\MyFirstChart\Chart.html文件里。

 

chart.html
<html>
<head>
<title>My First FusionCharts</title>
</head>
<body bgcolor="#ffffff">
<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase=http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="600" height="500" id="Column3D">
<param name="movie" value="../FusionCharts/FCF_Column3D.swf"/>
<param name="FlashVars" value="&dataURL=Data.xml&chartWidth=600&chartHeight=500">
<param name="quality" value="high"/>
<embed src="../FusionCharts/FCF_Column3D.swf" flashVars="&dataURL=Data.xml&chartWidth=600&chartHeight=500" quality="high" width="600" height="500" name="Column3D" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"/>
</object>
</body>
</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

问题

如果你很不幸,没有在页面上看到图形,那么可能是下面的原因之一:
1.SWF 没有放到正确的文件夹。
2.在Chart.html里,SWF的路径设置不正确。
3.没有安装Flash Player。
4.没有启用浏览器Flash播放选项。

如果你得到了一个“Error in Loading Data”的消息,可能是:
1.Data.xml文件没放到正确的文件夹。
2.Data.xml的文件名不正确。比如,你可能不小心把它命名为Data.xml.txt。

如果你得到了一个“Invalid XML Data”的消息,可能是;
1.Data.xml里的内容有错误。

到这里,第一个图表就做完了,感觉怎么样?你是觉得简单呢,容易呢,还是小Case呢?

不过,这里我有个小问题,就是Data.xml里,yAxisName属性如果是中文的话,显示不出来。希望随着教程的继续,我进一步了解FCF以后,可以解决这个小问题,也许它就是BUG。

图形转换

上面的图形是一个柱形图,如果我们想用同样的数据,以饼图来展示,我们只需要将Chart.html代码中的“FCF_Column3D.swf”改成饼图的SWF文件就可以了,即“FCF_Pie3D.swf”。现在我们再刷新浏览器,看看效果:


图片1

够酷吧。

相关文档:FusionCharts参数的详细说明和功能特性

     FusionCharts Free使用文档教程第一章--FusionCharts Free介绍

       FusionCharts Free使用文档教程第二章-FusionCharts Free安装

本文地址:http://www.cnblogs.com/atree/archive/2010/05/30/FusionCharts-Free-MyFirstChart.html

下一章介绍:FusionCharts Free使用文档教程第四章-FusionCharts Free使用JavaScript加载图形

转自:AJava.org    作者:道长A

原文标题:FusionCharts Free中文开发指南[使用文档教程]第三章--FusionCharts Free我的第一个图形

posted on 2010-06-01 08:45  zock  阅读(2938)  评论(0编辑  收藏  举报