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文件夹下。这个文件的内容如下:
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![ExpandedBlockStart.gif](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
< 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文件里。
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![ExpandedBlockStart.gif](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
< 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图形了。
![](http://ajava.org/uploads/090111/1_190119_1.png)
图片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”。现在我们再刷新浏览器,看看效果:
![](http://ajava.org/uploads/090111/1_193328_1.png)
图片1
够酷吧。
相关文档:FusionCharts3v破解版下载
FusionCharts Free使用文档教程第一章--FusionCharts Free介绍
FusionCharts Free使用文档教程第二章-FusionCharts Free安装
本文地址:http://www.cnblogs.com/ATree/archive/2010/05/30/FusionCharts-Free-MyFirstChart.html