版本v3.2.2
首先來(lái)個(gè)介紹：
http://baike.baidu.com/view/2153728.htm，F(xiàn)usionCharts是一個(gè)非常之方便能夠動(dòng)態(tài)生成多樣化圖表的組件。
網(wǎng)上對(duì)于FusionCharts的資料不是很多，而大部分都只是官方英文的，對(duì)于我這種英文白癡很是頭疼。下面將自己的使用心得分享并留作以后的查閱。內(nèi)容不多，但絕對(duì)實(shí)用！路徑結(jié)構(gòu) 1.Gallery 自帶的圖表示例，非常全面
創(chuàng)建圖表 下例中在項(xiàng)目下新建
FusionCharts路徑，存放圖表所需的swf、js文件
1.在Charts路徑下復(fù)制swf文件到
FusionCharts路徑。FusionCharts提供了2D、3D、地理、天氣等多種SWF文件，可以根據(jù)使用情況選擇。下例中使用3D圖表
Column3D.swf。
2.在SourceCode\JavaScript\Legacy路徑下復(fù)制FusionCharts.js腳本文件到
FusionCharts路徑。
3.在
FusionCharts路徑下創(chuàng)建xml數(shù)據(jù)文件Data.xml
<chart yAxisName="Sales Figure" caption="Top 5 Sales Person"
numberPrefix="$" showBorder="1" imageSave="1">
<set label="Alex" value="25000" />
<set label="Mark" value="35000" />
<set label="David" value="42300" />
<set label="Graham" value="35300" />
<set label="John" value="31300" />
</chart>
4.編寫(xiě)index.html測(cè)試代碼
<html>
<head>
<title>My First chart using FusionCharts XT</title>
<script type="text/javascript" src="FusionCharts/FusionCharts.js"></script> //引入的FunsionCharts腳本
</head>
<body>
<div id="chartContainer">
FusionCharts XT will load here!
</div>
<script type="text/javascript">
<!--
var myChart = new FusionCharts( "FusionCharts/Column3D.swf", //設(shè)置swf文件路徑
"myChartId", "400", "300", "0", "1" );
myChart.setXMLUrl("FusionCharts/Data.xml"); //設(shè)置xml文件路徑
myChart.render("chartContainer"); //顯示圖表的容器ID，上面的div
// -->
</script>
</body>
</html>
5.運(yùn)行index.html，你將看到如下結(jié)果
如何使用配置參數(shù)
參數(shù)可以到百度搜索，有比較全面的中文介紹。
在Gallery 路徑下有很多例子供參考。而FusionCharts的參數(shù)設(shè)置都是在數(shù)據(jù)文件xml中完成，就是上例中的數(shù)據(jù)源Data.xml，在不同的標(biāo)簽中寫(xiě)入相應(yīng)的屬性及參數(shù)既能得到不同的效果，參數(shù)大致包括圖表樣式的修改、文字樣式、數(shù)值顯示方式、動(dòng)態(tài)效果等。（參數(shù)中的布爾值用1或0代替true或false）
動(dòng)態(tài)XML數(shù)據(jù)（重點(diǎn)）
上例中給出的是靜態(tài)的XML文件，對(duì)于項(xiàng)目來(lái)說(shuō)數(shù)據(jù)往往是由后臺(tái)動(dòng)態(tài)生成的。那么如何使用動(dòng)態(tài)數(shù)據(jù)呢，例子如下：
使用jquery ajax異步調(diào)用動(dòng)態(tài)xml數(shù)據(jù)并展示
js代碼，不必理會(huì)其他部分，注意：
1.dataType : 'text'，請(qǐng)求的返回?cái)?shù)據(jù)類型一定是'text'字符串文本類型FusionCharts才能識(shí)別，json、xml格式都不可以。但返回的字符串必須是標(biāo)準(zhǔn)的xml格式，至于字符串形式的json格式是否能夠識(shí)別我沒(méi)有測(cè)試。
（苦于英文不好，所以我在這里調(diào)試了1個(gè)多小時(shí)，因?yàn)镕usionCharts能夠接收json、xml形式的靜態(tài)數(shù)據(jù)源，所以一直沒(méi)有想到在動(dòng)態(tài)賦值只能接收字符串形式的數(shù)據(jù)源）
2.chart.setDataXML(data)，對(duì)于動(dòng)態(tài)數(shù)據(jù)源不能使用上例中的setXMLUrl()方法。$.ajax( {
type : 'POST',
contentType: "application/json; charset=utf-8",
url : 'year.action',
data : parameters,
dataType : 'text',
success : function(data) {
var chart = new FusionCharts("js/compare/MSColumn3D.swf", "ChartId", "560", "400", "0", "0");
chart.setDataXML(data);
chart.render("chartContainer");
},
error : function(xhr) {
alert('頁(yè)出錯(cuò)\n\r' + xhr.responseText);
}
});
3.數(shù)據(jù)源格式
String dataChart =
"<chart palette='1' xaxisname='污染物' yaxisname='排放量' numdivlines='9' caption='2012年對(duì)比/同比查詢' subcaption='' >" +
"<categories font='Arial' >" +
"<category label='設(shè)備1' toolText='North America'/>" +
"<category label='設(shè)備2' />" +
"<category label='設(shè)備3' />" +
"<category label='設(shè)備4' />" +
"<category label='設(shè)備' />" +
"</categories>" +
"<dataset seriesname='B02' color='8BBA00' >" +
"<set value='30' />" +
"<set value='26' />" +
"<set value='29' />" +
"<set value='20' />" +
"<set value='34' />" +
"</dataset>" +
"<dataset seriesname='B01' color='A66EDD' >" +
"<set value='10' />" +
"<set value='98' />" +
"<set value='79' />" +
"<set value='73' />" +
"<set value='80' />" +
"</dataset>" +
"<dataset seriesname='M32' color='F6BD0F' >" +
"<set value='27' />" +
"<set value='-' />" +
"<set value='-' />" +
"<set value='-' />" +
"<set value='10' />" +
"</dataset>" +
"</chart>";
待續(xù)……
這里有英文的API和一些FAQ提示，英語(yǔ)好的可以看看：
http://kb.fusioncharts.com/questions/426/What+is+FusionCharts+JavaScript+API%3F