我們在做(zuò)複雜的數(shù)據統計(jì)功能時(shí)會(huì)用到餅狀圖，餅狀圖用整個(gè)圓表示總體(tǐ)的數(shù)量或整體(tǐ)值1，用圓內(nèi)各個(gè)扇形的大(dà)小(xiǎo)表示各部分數(shù)量或該部分占總體(tǐ)的百分比，它可(kě)以清晰直觀的表示各部分之間(jiān)以及各部分與整體(tǐ)之間(jiān)的數(shù)量關系。

本文将結合實際，使用PHP讀取Mysql數(shù)據表中的數(shù)據，并将獲取的數(shù)據按照要求輸出給前端JS，再通(tōng)過配置調用Highcharts圖表庫生(shēng)成餅狀圖。

1、準備

為(wèi)了更好的講解，實例中在Mysql數(shù)據庫中建立一張表chart_pie，用于表示各搜索引擎帶來(lái)的訪問量，表中分别有(yǒu)id、title和(hé)pv三個(gè)字段，id是自增長整型、主鍵；title表示搜素引擎的名稱，pv表示對應的訪問量。chart_pie表中已預置了相關數(shù)據，如圖:

2、PHP

在pie.php文件中，寫入如下代碼：

include_once('connect.php'); //連接數(shù)據庫
$res = mysql_query("select * from chart_pie");
while($row = mysql_fetch_array($res)){
	$arr[] = array(
		$row['title'],intval($row['pv'])
	);
}
$data = json_encode($arr);

代碼中使用原生(shēng)的PHP查詢mysq數(shù)據的方法，将查詢的結果集保存在一個(gè)數(shù)組$arr裏，并将該數(shù)組轉換 以備前端js調用。

3、Javascript

通(tōng)過配置Highcharts，可(kě)以生(shēng)成一個(gè)漂亮的餅狀圖，詳見代碼及注釋，如果你(nǐ)還(hái)不知道(dào)Highcharts是什麽東東，請(qǐng)查閱本站(zhàn)（helloweba.com）前面的相關文章。

var chart;
$(function() {
	chart = new Highcharts.Chart({
        chart: {
            renderTo: 'chart_pie',  //餅狀圖關聯html元素id值
			defaultSeriesType: 'pie', //默認圖表類型為(wèi)餅狀圖
			plotBackgroundColor: '#ffc',  //設置圖表區(qū)背景色
            plotShadow: true   //設置陰影(yǐng)
        },
        title: {
            text: '搜索引擎統計(jì)分析'  //圖表标題
        },
		credits: {
			text: 'helloweba.com'
		},
        tooltip: {
            formatter: function() { //鼠标滑向圖像提示框的格式化提示信息
                return '' + this.point.name + ': ' + 
                twoDecimal(this.percentage) + ' %';
            }
        },
        plotOptions: {
            pie: {
                allowPointSelect: true, //允許選中，點擊選中的扇形區(qū)可(kě)以分離出來(lái)顯示
                cursor: 'pointer',  //當鼠标指向扇形區(qū)時(shí)變為(wèi)手型（可(kě)點擊）
				//showInLegend: true,  //如果要顯示圖例，可(kě)将該項設置為(wèi)true
                dataLabels: {
                    enabled: true,  //設置數(shù)據标簽可(kě)見，即顯示每個(gè)扇形區(qū)對應的數(shù)據
                    color: '#000000',  //數(shù)據顯示顔色
                    connectorColor: '#999',  //設置數(shù)據域扇形區(qū)的連接線的顔色
					style:{
						fontSize: '12px'  //數(shù)據顯示的大(dà)小(xiǎo)
					},
                    formatter: function() { //格式化數(shù)據
                        return '' + this.point.name + ': ' + 
                        twoDecimal(this.percentage) + ' %';
                    }
                }
            }
        },
        series: [{ //數(shù)據列
            name: 'search engine',
			data:  //核心數(shù)據列來(lái)源于php讀取的數(shù)據并解析成JSON
        }]
    });
});

上(shàng)述代碼中，核心數(shù)據data來(lái)源于pie.php中php轉換的json數(shù)據：$data。轉換後輸出的JSON數(shù)據格式為(wèi)：

[["\u767e\u5ea6",1239],["google",998],["\u641c\u641c",342],["\u5fc5\u5e94",421],
["\u641c\u72d7",259],["\u5176\u4ed6",83]]

不用擔心，Highcharts會(huì)自動将JSON數(shù)據解析處理(lǐ)，并生(shēng)成百分比的數(shù)據。

其實，Highcharts生(shēng)成的餅狀圖還(hái)可(kě)以設置默認初始選中的扇形，即默認選中的扇形會(huì)從整圓形中分離出來(lái)，以便突出顯示。該效果要求默認data格式為(wèi)：

[{"name":"\u767e\u5ea6","y":1239,"sliced":true,"selected":true},["google",998],
["\u641c\u641c",342],["\u5fc5\u5e94",421],["\u641c\u72d7",259],["\u5176\u4ed6",83]]

注意看代碼中前部分：{"name":"\u767e\u5ea6","y":1239,"sliced":true,"selected":true}，這個(gè)字符串如何用PHP得(de)到呢？這就要修改pie.php中的php部分代碼：

while($row = mysql_fetch_array($res)){
	if($row['id']==1){
		$arr1[] = array(
			"name" =>  $row['title'],
			"y" => intval($row['pv']),
			"sliced" => true,  //默認分離
			"selected" => true  //默認選中
		); 
	}else{
		$arr[] = array(
		    $row['title'],intval($row['pv'])
	    );
	}
}
//合并數(shù)組
$arrs = array_merge($arr1,$arr);
$data = json_encode($arrs);

我們在循環遍曆結果集時(shí)，當id為(wèi)1時(shí)，将該項設置為(wèi)默認選中扇形區(qū)，構建數(shù)組$arr1，否則構建另一個(gè)數(shù)組$arr，然後将這兩個(gè)數(shù)組合并，并将合并後的數(shù)組轉換為(wèi)json數(shù)據，供Highcharts調用。

此外，格式化數(shù)據市，如果要顯示百分比，可(kě)使用this.percentage，Highcharts會(huì)自動将整數(shù)轉換為(wèi)百分數(shù)，如果要顯示數(shù)據量，直接使用this.y。

使用百分比：

formatter: function() { //格式化數(shù)據
    return '' + this.point.name + ': ' + twoDecimal(this.percentage) + ' %';
}

使用實際數(shù)據：

formatter: function() { //格式化數(shù)據
	return '' + this.point.name + ': ' + this.y ;
}

注意：在使用百分比數(shù)據時(shí)，需要将數(shù)據強制(zhì)保留兩位小(xiǎo)數(shù)，否則有(yǒu)可(kě)能出現37.0000000001的情況，而實際上(shàng)是37%。保留2位小(xiǎo)數(shù)的JS函數(shù)twoDecimal()請(qǐng)下載本例demo源碼。