一、fusioncharts的介紹：
FusionCharts是一個Flash的圖表組件，它可以用來製作數據動畫圖表，其中動畫效果用的是Adob e Flash 8 （原Macromedia Flash的）製作的flash ， FusionCharts可用於任何網頁的腳本語言類似於HTML ， .NET，ASP ， JSP技術的， PHP ， ColdFusion等，提供互動性和強大的圖表。使用XML作爲其數據接口， FusionCharts充分利用流體美麗的Flash創建緊湊，互動性和視覺逮捕圖。實質是用來顯示圖表的工具。
二、fusioncharts的安裝於應用
1. 在web項目目錄下新建一個文件夾( 如FusionCharts)，並把所有的SWF 文件都拷貝到這個文件夾裏。
2. 在頁面導入FusionCharts.js 文件，如：
<script type="text/javascript" src="FusionCharts.js"></script>
3. js加載數據生成報表(有兩種方法)
方法一：xml文件引用法
(1)定義一個固定格式的xml文件（以Data.xml爲例）
Date.xml的內容如下：
<graph caption='每月銷售額柱形圖' xAxisName='月份' yAxisName='Units' showNames='1' decimalPrecision='0' formatNumberScale='0'>
<set name='一月' value='462' color='AFD8F8' />
<set name='二月' value='857' color='F6BD0F' />
<set name='三月' value='671' color='8BBA00' />
<set name='四月' value='494' color='FF8E46' />
<set name='五月' value='761' color='008E8E' />
<set name='六月' value='960' color='D64646' />
<set name='七月' value='629' color='8E468E' />
<set name='八月' value='622' color='588526' />
<set name='九月' value='376' color='B3AA00' />
<set name='十月' value='494' color='008ED6' />
<set name='十一月' value='761' color='9D080D' />
<set name='十二月' value='960' color='A186BE' />
</graph>
(2) js加載方法，代碼如下：
<div id=”chartdiv1”></div>
<script type="text/javascript">
var myChart2 = new FusionCharts("../FusionCharts/FCF_Column3D.swf","myChartId2", "600","300");
myChart2.setDataURL("Data.xml");
myChart2.render("chartdiv1");
</script>
方法二：字符串加載法
（1） 定義一個有固定格式的字符串，即可以將上述xml文件組合成字符串
var dataXml = “<graph caption='每月銷售額柱形圖' xAxisName='月份' yAxisName='Units' showNames='1' decimalPrecision='0' formatNumberScale='0'><set name='一月' value='462' color='AFD8F8' /><set name='二月' value='857' color='F6BD0F' /><set name='三月' value='671' color='8BBA00'
/><set name='四月' value='494' color='FF8E46' /><set name='五月' value='761' color='008E8E' /><set name='六月' value='960' color='D64646' /><set name='七月' value='629' color='8E468E' /><set name='八月' value='622' color='588526' /><set name='九月' value='376' color='B3AA00'
/><set name='十月' value='494' color='008ED6' /><set name='十一月' value='761' color='9D080D' /><set name='十二月' value='960' color='A186BE' /></graph>”;
（2）js加載方法，代碼如下：
<div id=”chartdiv1”></div>
<script type="text/javascript">
var myChart2 = new FusionCharts("../FusionCharts/FCF_Column3D.swf","myChartId2", "600","300");
myChart2.setDataURL(dataXml);
myChart2.render("chartdiv1");
</script>
解析：操作步驟：
<1>建立對象：
用四個參數建立了一個FusionCharts對象，
var myChart = new FusionCharts("../FusionCharts/FCF_Column3D.swf", "myChartId", "600", "500");
第一個參數是SWF文件的地址。
第二個是圖形的id。這個id可以隨便叫什麼，但是要注意，當一個頁面裏有多個圖形的時候，這個id一定要是唯一的。
第三個參數是圖形的寬。
第四個參數是圖形的高。
<2> 加載數據：
第一種加載方法需要設置數據文件的地址。如：
myChart.setDataURL("Data.xml");
第二種加載方法需要設置對應的字符串。如：
myChart2.setDataURL(dataXml); //dataXml爲字符串
<3> 把圖形渲染在指定的地方。
myChart.render("chartdiv");
"chartdiv"就是前面的DIV的id，這就表示把圖形render到"chartdiv"，即Flash圖形就出現在這個id爲"chartdiv1"的DIV裏。
三、實例解析：
一下這個程序是自己參考別人的程序修改而來，這個程序能夠更好的顯示fusioncharts的功能。
（1）、html文件比如名爲test。html內容如下
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<div id="divBarChart">
</div>
<div id="divPieChart">
</div>
<div id="divPieChart2">
</div>
<script type="text/javascript" src="FusionChart/FusionCharts.js"></script>
<script type="text/javascript">
function ConstructHttpString(myURL) {
myURL += "?rnd=" + new Date().getTime();
return encodeURIComponent(myURL.toString());
}
//畫圖(以指定 xml格式文件爲數據源)
function DrawChart(divId,flashFileName,width,height,xmlUrl) {
var myChartId = new Date().getTime();
var myChart = new FusionCharts("FusionChart/" + flashFileName, myChartId, width, height);
//myChart.setDataURL("data.xml"); //獲取xml格式數據源
myChart.setDataURL(ConstructHttpString(xmlUrl)); //獲取xml格式數據源
myChart.set
myChart.addParam("wmode", "Opaque");
myChart.render(divId);
}
//畫圖 (以指定 xml格式字符串爲數據源)
function DrawChart2(divId, flashFileName, width, height) {
var myChartId = new Date().getTime();
var myChart = new FusionCharts("FusionChart/" + flashFileName, myChartId, width, height);
myChart.setDataXML('<chart caption="逗你玩" numberPrefix="$"><set value="60" label="Item A" color="AFD8F8" /><set value="17" label="Item B" color="F6BD0F" /><set value="23" label="Item C" color="8BBA00" isSliced="1" /></chart>');
myChart.addParam("wmode", "Opaque");
myChart.render(divId);
}
//柱狀圖
DrawChart("divBarChart", "StackedColumn2D.swf", "831", "396", "dataXml.xml");
//餅狀圖
DrawChart("divPieChart", "Pie2D.swf", "831", "396", "data.xml");
//餅狀圖
// DrawChart2("divPieChart", "Pie2D.swf", "500", "396");
//DrawChart2("divBarChart", "Pie2D.swf", "500", "396");
//兩種方法可以顯示餅圖
</script>
</body>
</html>
其中的兩個函數：解釋如下
setDataURL：設置數據源Url，以指定 xml格式文件爲數據源
setDataXML：設置數據源xml內容，以指定 xml格式字符串爲數據源
（2）爲data文件，本例爲data。xml於dataXml。xml兩個數據文件，一個用來顯示柱形圖的數據文件，另外一個是用來顯示餅圖的數據文件
data。xml的內容如下：
<?xml version="1.0" encoding="utf-8" ?>
<chart caption="Pie Chart" numberPrefix="$">
<set value="0.13" label="Item A" color="AFD8F8" />
<set value="0.5" label="Item B" color="F6BD0F" />
<set value="0.6" label="Item C" color="8BBA00" isSliced="1" />
<set value="0.2" label="Item D" color="A66EDD" />
<set value="0.4" label="Item E" color="F984A1" />
</chart>
dataXml。xml內容如下：
<?xml version="1.0" encoding="utf-8" ?>
<chart palette="2" caption="Product Comparison" shownames="1" showvalues="0" numberPrefix="" showSum="1" decimals="0" yAxisMinValue="20"useRoundEdges="1" >
<categories>
<category label="Product A" />
<category label="Product B" />
<category label="Product C" />
<category label="Product D" />
<category label="Product E" />
</categories>
<dataset seriesName="2004" color="AFD8F8" showValues="0">
<set value="25601.34" />
<set value="20148.82" />
<set value="17372.76" />
<set value="35407.15" />
<set value="38105.68" />
</dataset>
<dataset seriesName="2005" color="F6BD0F" showValues="0">
<set value="57401.85" />
<set value="41941.19" />
<set value="45263.37" />
<set value="117320.16" />
<set value="114845.27" />
</dataset>
<dataset seriesName="2006" color="8BBA00" showValues="0">
<set value="45000.65" />
<set value="44835.76" />
<set value="18722.18" />
<set value="77557.31" />
<set value="92633.68" />
</dataset>
</chart>
如上兩個文件必須和test。html放在同一層目錄裏面。
然後再上面三個文件的同層目錄中建一個FusionCharts的目錄裏面放如下幾個文件：
（1）FusionChart。js（2）FusionChartsExportComponent。js（3）放置從fusionchart官網下載的swf文件。
通過以上工作直接點擊test。html就會顯示如下的兩個圖形了：
以上就是fusionchart的簡單應用。在這方面fusioncharts還是比價不錯的工具。