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