新手学fusionCharts做图表
在web系统上嵌入图表的技术有很多，fusionCherts是其中一种优秀的技术，特别提一提，本人对fusionCharts学习，得益于以下博文：http://www.cnblogs.com/tippoint/tag/fusioncharts/
该博文中有详细的fusionCharts教程,我这篇文章的目的只是对自己的学习做一个小结而已。
总的来说：用fusionCharts做图表无非就是做三件事：
第一：在展示页面（html,aspx等）找到一个展示图表的位子
第二：准备数据源，数据源必须是XML文件的格式
第三：初始化fusionCharts图表 ，把数据源引用到fusionCharts图表中
其中初始化fusionCharts图表要做的包括：
1、 初始化OBJECT和EMBED标签
2、 在< param>标签中初始化fusionCharts
<param name="movie" value="../FusionCharts/Pie3D.swf" /> --导入报表样板图
<param name="FlashVars" value="&dataURL=Data.xml&chartWidth=550&chartHeight=300"> --导入外部的XML文件数据源，或直接把数据源写在该<param>中
<param name="quality" value="high" /> --说明图表质量，一般是 name="quality" value="high"
----------------------
OBJECT和EMBED标签用法参考文
我们要在网页中正常显示flash内容，那么页面中必须要有指定flash路径的标签。也就是OBJECT和EMBED标签。OBJECT标签是用于windows平台的IE浏览器的，而EMBED是用于windows和Macintosh平台下的Netscape Navigator浏览器以及Macintosh平台下的IE浏览器。windows平台的IE利用Activex控件来播放flash而其它的浏览器则使用Netscape插件技术来播放flash。
下面是简单的网页中插入flash的代码示例：
＜OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"
WIDTH="550" HEIGHT="400" ＞
＜PARAM
VALUE="myFlashMovie.swf"＞
＜PARAM VALUE=high＞
＜PARAM
VALUE=#FFFFFF＞
＜EMBED src="/support/flash/ts/documents/myFlashMovie.swf"
quality=high bgcolor=#FFFFFF WIDTH="550" HEIGHT="400"
NAME="myMovieName" ALIGN=""
TYPE="application/x-shockwave-flash"
PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"＞
＜/EMBED＞
＜/OBJECT＞
OBJECT标签是用于windows IE3.0及以后浏览器或者其它支持Activex控件的浏览器。“classid”和“codebase”属性必须要精确地按上例所示的写法写，它们告诉浏览器自动下载flash player的地址。如果你没有安装过flash player 那么IE3.0以后的浏览器会跳出一个提示框访问是否要自动安装flash player。当然，如果你不想让那些没有安装flash player的用户自动下载播放器，或许你可以省略掉这些代码。
EMBED标签是用于Netscape Navigator2.0及以后的浏览器或其它支持Netscape插件的浏览器。“pluginspage”属性告诉浏览器下载flash player的地址，如果还没有安装flash player的话，用户安装完后需要重启浏览器才能正常使用。
为了确保大多数浏览器能正常显示flash，你需要把EMBED标签嵌套放在OBJECT标签内，就如上面代码例子一样。支持Activex控件的浏览器将会忽略OBJECT标签内的EMBED标签。Netscape和使用插件的IE浏览器将只读取EMBED标签而不会识别OBJECT标签。也就是说，如果你省略了EMBED标签，那firefox就不能识别你的flash了。
本文列出了用于发布影片的OBJECT和EMBED标签的必要以及可选属性。
一、必需属性
·CLASSID-设置浏览器的Activex控件，仅用于OBJECT标签。
·CODEBASE-设置flash Activex控件的位置，因而如果浏览器如果没有安装的话，可以自动下载安装。仅用于OBJECT标签。
·WIDTH-以百分比或象素指定flash影片的宽度。
·HEIGHT-以百分比或象素指定flash影片的高度。
·SRC-指定影片的下载地址。仅用于EMBED标签。
·PLUGINSPAGE-设置flash 插件的位置，因而如果浏览器如果没有安装的话，可以自动下载安装。仅用于EMBED标签。
·MOVIE-指定影片的下载地址。仅用于OBJECT标签。
---------------------------
实例1：在html页面上展示fusionCharts图表
下载一个fusionCharts包，fusionCharts包中包括.swf文件，.js文件，和其他一些文件
把swf文件放到fusion报表的同一文件下，
创建fusion文件夹，在fusion文件夹下
1、创建Data.xml文件存放数据源
Data.xml文件包括两个标签
Chart标签说明是chart数据，并在chart属性中设置图表的相关属性值，比如标题，X轴，Y轴，Y轴前缀。
set标签，设置图表的具体数据的数据
Data.xml文件
<chart caption='Monthly sales Summary' subcaption='For the year 2006' xAxisName='Month' yAxisName='Sale' numberPrefix='$'>
<set label='一月' value='17400'/>
<set label='二月' value='17400'/>
<set label='三月' value='20500'/>
<set label='四月' value='24000'/>
<set label='五月' value='26500'/>
<set label='六月' value='30000'/>
<set label='七月' value='32000'/>
<set label='八月' value='17400'/>
<set label='九月' value='26500'/>
<set label='十月' value='30000'/>
<set label='十一月' value='32000'/>
<set label='十二月' value='17400'/>
</chart>
2、Html文件中，初始化chart并导入数据
<html>
<body bgcolor="#ffffff">
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="550" height="300" id="Pie3D">
<param name="movie" value="../FusionCharts/Pie3D.swf" /> --导入报表样板图
<param name="FlashVars" value="&dataURL=Data.xml&chartWidth=550&chartHeight=300"> --导入外部的XML文件数据源，或直接把数据源写在该<param>中
<param name="quality" value="high" /> --说明图表质量，一般是 name="quality" value="high"
<embed src="../FusionCharts/Pie3D.swf" flashVars="&dataURL=Data.xml&chartWidth=550&chartHeight=300" quality="high" width="550"
height="300" name="Pie3D"type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
</body>
</html>
有时候也直接把XML中的数据源写到html页面中，修改以上代码的dataURL
<param name="FlashVars" value="&dataXML=<chart caption='Monthly Sales Summary' subcaption='For the year 2006' xAxisName='Month' yAxisName='Sales' numberPrefix='$'>
<set label='January' value='17400' />
<set label='February' value='19800' />
<set label='March' value='21800' />
<set label='April' value='23800' />
<set label='May' value='29600' />
<set label='June' value='27600' />
<set label='July' value='31800' />
<set label='August' value='39700' />
<set label='September' value='37800' />
<set label='October' value='21900' />
<set label='November' value='32900' />
<set label='December' value='39800' />
</chart>">
实例二：用js使用chart图表，js提供了FusionCharts类来操作fusion图表
在页面中只须简单几步就可以实现charts，
1、导入下载包中的FusionCharts.js包
2、在展示页面中写好一个DIV放置图表
3、在<script>中实例化FusionCharts对象的同时也初始化FusionCharts对象
4、用该对象提供的方法指向数据源和指向放置图表的div
数据源在Data.xml页面中
<html>
<head>
<script language="JavaScript" src="../FusionCharts/FusionCharts.js"></script>
</head>
<body bgcolor="#ffffff">
<div id="chartdiv" align="center">The chart will appear within this DIV. This text will be replaced by the chart.</div>
<script type="text/javascript">
var myChart = new FusionCharts("../FusionCharts/Column3D.swf", "myChartId", "900", "300", "0", "0");
myChart.setDataURL("Data.xml");
myChart.render("chartdiv");
</script>
</body>
</html>
如果不是指向XML文件的话，可以直接写数据源，以字符串的形式写xml标签
myChart.setDataXML("
<chart caption='Monthly Sales Summary' subcaption='For the year 2006' xAxisName='Month' yAxisName='Sales' numberPrefix='$'>
<set label='January' value='17400' /><set label='February' value='19800' /><set label='March' value='21800' />
<set label='April' value='23800' /><set label='May' value='29600' /><set label='June' value='27600' />
<set label='July' value='31800' /><set label='August' value='39700' />
<set label='September' value='37800' /><set label='October' value='21900' />
<set label='November' value='32900' /><set label='December' value='39800' />
</chart>");
