-
http://ajava.org/hot/fusioncharts/870.html
-
时间:2009-01-11 18:56 来源:AJava.org 作者:道长A
[AJava原创]FusionCharts Free中文开发指南[使用文档教程]第三章--FusionCharts Free我的第一个图形
上面的代码里,有一个叫<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=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图形了。
![第三章--FusionCharts Free我的第一个图形 - 清风幻影 - 清风侠的博客](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”。现在我们再刷新浏览器,看看效果:
![第三章--FusionCharts Free我的第一个图形 - 清风幻影 - 清风侠的博客](http://ajava.org/uploads/090111/1_193328_1.png)
图片1
够酷吧。
在接下来的系列文章里,我将介绍使用JavaScript来加载Flash。
![第三章--FusionCharts Free我的第一个图形 - 清风幻影 - 清风侠的博客 第三章--FusionCharts Free我的第一个图形 - 清风幻影 - 清风侠的博客](http://ajava.org/images/ajava.gif)
![第三章--FusionCharts Free我的第一个图形 - 清风幻影 - 清风侠的博客 第三章--FusionCharts Free我的第一个图形 - 清风幻影 - 清风侠的博客](http://ajava.org/images/dza.gif)