如何利用FusionCharts 来创建3D柱状图

如题所述

第1个回答  2016-08-04

  使用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,如图:

相似回答