fusioncharts 数据报表 （1）

阅读更多

  一.最近要做fusioncharts方面的东西，以前没接触过，所以就粗略的了解了一下。把我觉得不错的写下来。做完项目会继续完善和深入。毕竟现在只是个热身。首先说说怎么直接在html里面引入报表吧。
  fusioncharts 没多大，在FusionChartsFree>Charts里面方有swf文件。就是我们要创建报表的类似模板flash吧。要创建哪个就引入哪个，然后需要准备数据，数据是xml特定格式的。这个必须按规范来。其格式如下：

1　　
　2　　 　　
　3　　 　　
　4　　 　　
　5　　 　　
　6　　 　　
　7　　 　　
　8　　 　　
　9　　 　　
10　　 　　
11　　 　　
12　　 　　
13　　 　　
14　
上面的代码里，有一个叫的root元素，它还有一些属性，用来定义标题，坐标轴，数值格式。我们还看到有很多元素，它用来描述数据。name属性用来表示月份名称，value属性表示销售额，color属性表示图形颜色。

然后创建html：
　　
　　 　　
　　　　　 　　
　　 　　
　　 　　
　　　　　 　　
　　
　　

movie指定我们的swf文件，FlashVars参数值用来指定XML文件的路径以及图形的宽和高。
现在打开html就可以看到一个3D的柱状图了。如果没有显示就看看是不是数据的格式不对，或者是引入路径和swf路径的问题。如果都对了那么可能是浏览器没有设置或安装flash。

二.上面讲的是用html直接来做的，　实际上，我们还可以使用FCF提供的一个JavaScript类来加载图形。使用JavaScript的方式有几个好处，一是代码量大大减少，特别是当一个页面上有几个图形时。二是代码更加直观。三是可以避免IE出现“单击以激活使用这个控件”的提示。
下面是html 代码：

　　
　　　 　　
　　　　　　　 　　
　　　 　　　　
　　
　　　

图形将出现这个DIV里，到时这里的字将被图形替代。

　　
　　　 　　
　　
　
　
　然后，我们定义了一个DIV，它还有个id。
　　

图形将出现这个DIV里，到时这里的字将被图形替代。

　
　　我们的图形就出现在这个DIV里。
　　接着，我们用四个参数建立了一个FusionCharts对象，
var myChart = new FusionCharts("../FusionCharts/FCF_Column3D.swf", "myChartId", "600", "500");　
　　第一个参数是SWF文件的地址。
　　第二个是图形的id。这个id你可以随便叫什么，但是要注意，在后面我们讲到一个页面里有多个图形的时候，这个id一定要是唯一的。
　　第三个参数是图形的宽。
　　第四个参数是图形的高。
　　我们还要设置数据文件的地址。
myChart.setDataURL("Data.xml");　　
　　最后，我们把图形渲染在指定的地方。
myChart.render("chartdiv");　　
　　"chartdiv"就是前面的DIV的id，这就表示把图形render到"chartdiv"。
　　现在你运行JSChart.html，你会看到同Chart.html一样的效果。很显然使用JavaScript加载图形，更方便，更直观。
  如果一个页面有多个表怎么办？其实很简单：
　　
　　　　
　　 　　
　　
　　
　　

First Chart Container Pie 3D

　　
　　 　　
　　
　

Second Chart Container Column 3D

　　
　　 　　
　　
　

Third Chart Container Line 2D

　　
　　 　　
　　
　

Fourth Chart Container Area 2D

　　
　　 　　
　　
　　　
这里不同的就是 ： 加载的swf 、 div 的id和FusionCharts对象的名称。
如果要把柱状图换成饼状图或者其他的数据格式不用变化，引入相应的swf就行，是不是非常方便。这只是个人理解的有不对的还望指出一起学习。