如何利用FusionCharts 来创建3D柱状图
2016-08-04 · www.fei580.com
飞瀛国际机票
使用FusionCharts来创建图形，你需要做下面三件事情：
选择好你要创建的图形类型对应的SWF文件。例如，我们现在要创建的是3D柱状图形，那么我们的SWF文件就是FusionCharts_Column3D.swf。上篇文章已经介绍过了，所有的SWF文件都放在FusionCharts>Charts文件夹里。
XML数据文件。FusionCharts只接受基于XML格式的数据。因此，你需要把你的数据转成XML格式。
HTML文件。这个HTML文件将包含用来嵌入图形的代码。
接下来，要先新建一个文件夹。例如，创建一个叫c:\FusionCharts 的文件夹。
3.1设置SWF文件
先在c:\FusionCharts下建一个叫FusionCharts的文件夹。把所有的SWF文件都拷贝到c:\FusionCharts\FusionCharts\。
3.2创建XML数据文档
做数据报表。例如展示一年里每个月的销售情况。所有数据看起来就像下面的表格中的一样。
FusionCharts只接受XML格式的数据，其他如Excel，CSV，text等都不行。
按照上表中的数据，做成一个叫Data.xml的XML文件，保存在c:\FusionCharts\MyFirstChart文件夹下。这个文件的容如下：
<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属性表示图形颜色。
3.3创建包含图形的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/FusionCharts_Column3D.swf" />
<param name="FlashVars" value="&dataURL=Data.xml&chartWidth=600&chartHeight=500">
<param name="quality" value="high" />
<embed src="../FusionCharts/FusionCharts_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文件，即FusionCharts_Column3D.swf。FlashVars参数值用来指定XML文件的路径以及图形的宽和高。
看到这里，如果不熟悉在网页里调用Flash的朋友，可能会有点迷惑，因为有一个embed参数，它的各个值都和param参数的值是一样的，为什么会这样呢？
其实，这是为了在不同的浏览器里都能运行Flash的一个解决办法。IE浏览器是使用param参数来运行Flash的，而Netscape则是使用embed参数来运行Flash。因此，为了保证应用能够在大多数浏览器上运行，就需要加上embed参数，并且值和param完全相同。
到此，所有工作基本完成，用IE打开Chart.html，如图：
