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

2025-06-28 04:35:38
推荐回答(1个)
回答1:

在下载完FusionCharts 以后,我们就可以开始创建我们的第一个flash图表了。我们将要创建一个简单的3D柱状图形,用它来展示每月销售情况摘要。

要使用FusionCharts来创建图形,你需要做下面三件事情:

1.选择好你要创建的图形类型对应的SWF文件。例如,我们现在要创建的是3D柱状图形,那么我们的SWF文件就是FusionCharts_Column3D.swf。上篇文章已经介绍过了,所有的SWF文件都放在FusionCharts>Charts文件夹里。

2.XML数据文件。FusionCharts只接受基于XML格式的数据。因此,你需要把你的数据转成XML格式。

3.HTML文件。这个HTML文件将包含用来嵌入图形的代码。

在我们进行上面的工作之前,我们先要新建一个文件夹。例如,我们创建一个叫c:\FusionCharts 的文件夹。以后我们的例子都放到这个里面。
对于我们的第一个例子来说,我们将在c:\FusionCharts下再建一个叫MyFirstChart的文件夹。

3.1设置SWF文件

我们还要在c:\FusionCharts下建一个叫FusionCharts的文件夹。现在,我们把所有的SWF文件都拷贝到到这个文件下面(c:\FusionCharts\FusionCharts\)。以后,我们所有例子的代码,都要引用这个文件夹下面的SWF文件。

3.2创建XML数据文档

要做报表,当然要有数据了。在这个例子里,我们准备展示一年里每个月的销售情况。所有数据看起来就像下面的表格中的一样。

我们知道,FusionCharts只接受XML格式的数据,其他如Excel,CSV,text等都不行。

现在我们按照上表中的数据,做成一个叫Data.xml的XML文件,保存在c:\FusionCharts\MyFirstChart文件夹下。这个文件的容如下:

1.

2.

3.

4.

5.

6.

7.

8.

9.

10.

11.

12.

13.

14.


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

3.3创建包含图形的HTML文件

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

15.

16.

17. My First FusionCharts

18.

19.

20.

21.

22.

23.

24.

25.


26.

27.

上面的代码,其实就是一个显示flash的简单标记。

movie参数值指定我们的SWF文件,即FusionCharts_Column3D.swf。FlashVars参数值用来指定XML文件的路径以及图形的宽和高。

看到这里,如果不熟悉在网页里调用Flash的朋友,可能会有点迷惑,因为我们发现有一个embed参数,它的各个值都和param参数的值是一样的,为什么会这样呢?

其实,这是为了在不同的浏览器里都能运行Flash的一个解决办法。IE浏览器是使用param参数来运行Flash的,而Netscape则是使用embed参数来运行Flash。因此,为了保证我们的应用能够在大多数浏览器上运行,我们就需要加上embed参数,并且值和param完全相同。
好了,所有工作都做完了,现在,你可以用IE打开Chart.html,就能看到你的第一个漂亮的Flash图形了。