fusioncharts 数据报表 （1）
ifconfig 2012-11-27
一.最近要做fusioncharts方面的东西，以前没接触过，所以就粗略的了解了一下。把我觉得不错的写下来。做完项目会继续完善和深入。毕竟现在只是个热身。首先说说怎么直接在html里面引入报表吧。
fusioncharts没多大，在FusionChartsFree>Charts里面方有swf文件。就是我们要创建报表的类似模板flash吧。要创建哪个就引入哪个，然后需要准备数据，数据是xml特定格式的。这个必须按规范来。其格式如下：
1<graphcaption='每月销售额柱形图'xAxisName='月份'yAxisName='Units'showNames='1'decimalPrecision='0'formatNumberScale='0'>
2 <setname='一月'value='462'color='AFD8F8'/>
3 <setname='二月'value='857'color='F6BD0F'/>
4 <setname='三月'value='671'color='8BBA00'/>
5 <setname='四月'value='494'color='FF8E46'/>
6 <setname='五月'value='761'color='008E8E'/>
7 <setname='六月'value='960'color='D64646'/>
8 <setname='七月'value='629'color='8E468E'/>
9 <setname='八月'value='622'color='588526'/>
10 <setname='九月'value='376'color='B3AA00'/>
11 <setname='十月'value='494'color='008ED6'/>
12 <setname='十一月'value='761'color='9D080D'/>
13 <setname='十二月'value='960'color='A186BE'/>
14</graph>
上面的代码里，有一个叫<graph>的root元素，它还有一些属性，用来定义标题，坐标轴，数值格式。我们还看到有很多<set>元素，它用来描述数据。name属性用来表示月份名称，value属性表示销售额，color属性表示图形颜色。
然后创建html：
<html>
<head>
<title>MyFirstFusionCharts</title>
</head>
<bodybgcolor="#ffffff">
</body>
</html>
movie指定我们的swf文件，FlashVars参数值用来指定XML文件的路径以及图形的宽和高。
现在打开html就可以看到一个3D的柱状图了。如果没有显示就看看是不是数据的格式不对，或者是引入路径和swf路径的问题。如果都对了那么可能是浏览器没有设置或安装flash。
二.上面讲的是用html直接来做的， 实际上，我们还可以使用FCF提供的一个JavaScript类来加载图形。使用JavaScript的方式有几个好处，一是代码量大大减少，特别是当一个页面上有几个图形时。二是代码更加直观。三是可以避免IE出现“单击以激活使用这个控件”的提示。
下面是html代码：
<html>
<head>
<scriptlanguage="JavaScript"src="../FusionCharts/FusionCharts.js"></script>
</head>
<bodybgcolor="#ffffff">
<scripttype="text/javascript">
varmyChart=newFusionCharts("../FusionCharts/FCF_Column3D.swf","myChartId","600","500");
myChart.setDataURL("Data.xml");
myChart.render("chartdiv");
</script>
</body>
</html>
<scriptlanguage="JavaScript"src="../FusionCharts/FusionCharts.js"></script>
然后，我们定义了一个DIV，它还有个id。
我们的图形就出现在这个DIV里。
接着，我们用四个参数建立了一个FusionCharts对象，
varmyChart=newFusionCharts("../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加载图形，更方便，更直观。
如果一个页面有多个表怎么办？其实很简单：
<html>
<head><title>多图形</title>
<scriptlanguage="JavaScript"src="../FusionCharts/FusionCharts.js"></script>
</head>
<bodybgcolor="#ffffff">
<scripttype="text/javascript">
varmyChart1=newFusionCharts("../FusionCharts/FCF_pie3D.swf","myChartId1","600","400");
myChart1.setDataURL("Data.xml");
myChart1.render("chartdiv1");
</script>
<scripttype="text/javascript">
varmyChart2=newFusionCharts("../FusionCharts/FCF_Column3D.swf","myChartId2","600","300");
myChart2.setDataURL("Data.xml");
myChart2.render("chartdiv2");
</script>
<scripttype="text/javascript">
varmyChart3=newFusionCharts("../FusionCharts/FCF_line.swf","myChartId3","600","300");
myChart3.setDataURL("Data.xml");
myChart3.render("chartdiv3");
</script>
<scripttype="text/javascript">
varmyChart4=newFusionCharts("../FusionCharts/FCF_area2D.swf","myChartId4","400","250");
myChart4.setDataURL("Data.xml");
myChart4.render("chartdiv4");
</script>
</body>
</html>
这里不同的就是：加载的swf、div的id和FusionCharts对象的名称。
如果要把柱状图换成饼状图或者其他的数据格式不用变化，引入相应的swf就行，是不是非常方便。这只是个人理解的有不对的还望指出一起学习。
