Posted on 2012-10-24 16:57
誰用我名字啦？ 閱讀(1695)
評論(0) 編輯 收藏 所屬分類:
flex學習之路
版本v3.2.2
首先來個介紹：
http://baike.baidu.com/view/2153728.htm，FusionCharts是一個非常之方便能夠動態生成多樣化圖表的組件。
網上對于FusionCharts的資料不是很多，而大部分都只是官方英文的，對于我這種英文白癡很是頭疼。下面將自己的使用心得分享并留作以后的查閱。內容不多，但絕對實用！路徑結構 1.Gallery 自帶的圖表示例，非常全面
創建圖表 下例中在項目下新建
FusionCharts路徑，存放圖表所需的swf、js文件
1.在Charts路徑下復制swf文件到
FusionCharts路徑。FusionCharts提供了2D、3D、地理、天氣等多種SWF文件，可以根據使用情況選擇。下例中使用3D圖表
Column3D.swf。
2.在SourceCode\JavaScript\Legacy路徑下復制FusionCharts.js腳本文件到
FusionCharts路徑。
3.在
FusionCharts路徑下創建xml數據文件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.編寫index.html測試代碼
<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", //設置swf文件路徑
"myChartId", "400", "300", "0", "1" );
myChart.setXMLUrl("FusionCharts/Data.xml"); //設置xml文件路徑
myChart.render("chartContainer"); //顯示圖表的容器ID，上面的div
// -->
</script>
</body>
</html>
5.運行index.html，你將看到如下結果
如何使用配置參數
參數可以到百度搜索，有比較全面的中文介紹。
在Gallery 路徑下有很多例子供參考。而FusionCharts的參數設置都是在數據文件xml中完成，就是上例中的數據源Data.xml，在不同的標簽中寫入相應的屬性及參數既能得到不同的效果，參數大致包括圖表樣式的修改、文字樣式、數值顯示方式、動態效果等。（參數中的布爾值用1或0代替true或false）
動態XML數據（重點）
上例中給出的是靜態的XML文件，對于項目來說數據往往是由后臺動態生成的。那么如何使用動態數據呢，例子如下：
使用jquery ajax異步調用動態xml數據并展示
js代碼，不必理會其他部分，注意：
1.dataType : 'text'，請求的返回數據類型一定是'text'字符串文本類型FusionCharts才能識別，json、xml格式都不可以。但返回的字符串必須是標準的xml格式，至于字符串形式的json格式是否能夠識別我沒有測試。
（苦于英文不好，所以我在這里調試了1個多小時，因為FusionCharts能夠接收json、xml形式的靜態數據源，所以一直沒有想到在動態賦值只能接收字符串形式的數據源）
2.chart.setDataXML(data)，對于動態數據源不能使用上例中的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('頁出錯\n\r' + xhr.responseText);
}
});
3.數據源格式
String dataChart =
"<chart palette='1' xaxisname='污染物' yaxisname='排放量' numdivlines='9' caption='2012年對比/同比查詢' subcaption='' >" +
"<categories font='Arial' >" +
"<category label='設備1' toolText='North America'/>" +
"<category label='設備2' />" +
"<category label='設備3' />" +
"<category label='設備4' />" +
"<category label='設備' />" +
"</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>";
待續……
這里有英文的API和一些FAQ提示，英語好的可以看看：
http://kb.fusioncharts.com/questions/426/What+is+FusionCharts+JavaScript+API%3F