amCharts圖表開發之餅狀圖

從本節開始，來熟悉一下圖表開發的相關知識。這裏選擇的是amCharts圖表，它提供了豐富的JavaScript圖表組件，圖表的效果非常漂亮。amCharts支持餅狀圖、柱狀圖、條形圖、線形圖、面積圖、雷達等各種圖表。
所有都是基於2.x的版本，有別於1.x的flash版本，2.x是基於Javascript/HTML5實現，更加輕量。本節先熟悉餅狀圖pieChart。
開發amcharts圖表需要導入amcharts.js這個文件，可以從官網下載。關鍵步驟就是動態生成畫圖用的數據源，返回給js，然後畫圖到頁面。
amCharts餅狀圖的數據格式爲：

var chartData = [{
                key: "China",
                value: 100
            }, {
                key: "Ireland",
                value: 120
            }, {
                key: "Germany",
                value: 115
            }, {
                key: "Australia",
                value: 109
            }];

實際上就是一個數組，我們要做的就是從後臺返回數據來動態擴充這個空數組

var chartData=[]

。後臺的實現不介紹，我這裏返回的是key跟value拼接的一串字符串data（key1:value1;key2:value2;key3:value3;key4:value4)，前臺js先按（;）分割，再按（:）分割。代碼如下：

var rows = data.split(";"); 
for (var i = 0; i < rows.length; i++){
	if (rows[i]) {
		var column = rows[i].split(":");
		//key
		var s1= column[0];
		//value
		var s2 = column[1];
                //分割的值塞到每個子object
		var dataObject = {key:s1, value:s2};
                //填充數組
		chartData.push(dataObject);
	}
}

這樣，數據源就動態生成好了。下面就直接調用方法來完成圖表繪製和設定圖表效果。

//AmCharts.ready(function () {
	//餅狀圖 pie chart對象
	chart = new AmCharts.AmPieChart();
	//數據源
	chart.dataProvider = chartData;
	chart.titleField = "key";
	chart.valueField = "value";
	//圖例
	legend = new AmCharts.AmLegend();
	legend.align = "center";
	legend.markerType = "circle";
	chart.addLegend(legend);
	//把圖畫到頁面
	chart.write("chartdiv");
//});

不要忘了，頁面上還要有一塊畫圖區域：

<div id="chartdiv" style="width: 100%; height: 450px;"></div>

當然還可以設定圖例、3D效果、提示標籤切換等功能，這裏不做介紹，sample裏面有。
到此基本完成餅狀圖的繪製，重點就是數據源的動態生成。看下效果吧：

[img]http://dl2.iteye.com/upload/attachment/0087/9325/1ff4bf57-835a-35cb-b750-16c5b2483100.png[/img]