我們在做複雜的資料統計功能時會用到餅狀圖，餅狀圖用整個圓表示總體的數量或整體值1，用圓內各個扇形的大小表示各部分數量或該部分佔總體的百分比，它可以清晰直觀的表示各部分之間以及各部分與整體之間的數量關係。

本文將結合實際，使用PHP讀取Mysql資料表中的資料，並將獲取的資料按照要求輸出給前端JS，再通過配置呼叫Highcharts圖表庫生成餅狀圖。

1、準備

為了更好的講解，例項中在Mysql資料庫中建立一張表chart_pie，用於表示各搜尋引擎帶來的訪問量，表中分別有id、title和pv三個欄位，id是自增長整型、主鍵；title表示搜素引擎的名稱，pv表示對應的訪問量。chart_pie表中已預置了相關資料，如圖:

2、PHP

在pie.php檔案中，寫入如下程式碼：

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

程式碼中使用原生的PHP查詢mysq資料的方法，將查詢的結果集儲存在一個數組$arr裡，並將該陣列轉換 以備前端js呼叫。

3、Javascript

通過配置Highcharts，可以生成一個漂亮的餅狀圖，詳見程式碼及註釋，如果你還不知道Highcharts是什麼東東，請查閱本站（helloweba.com）前面的相關文章。

var chart; 
$(function() { 
    chart = new Highcharts.Chart({ 
        chart: { 
            renderTo: 'chart_pie',  //餅狀圖關聯html元素id值 
            defaultSeriesType: 'pie', //預設圖表型別為餅狀圖 
            plotBackgroundColor: '#ffc'
 
,  //設定圖表區背景色 
            plotShadow: true   //設定陰影 
        }, 
        title: { 
            text: '搜尋引擎統計分析'  //圖表標題 
        }, 
        credits: { 
            text: 'helloweba.com' 
        }, 
        tooltip: { 
            formatter: function() { //滑鼠滑向影象提示框的格式化提示資訊 
                return '<b>' + this.point.name + '</b>: ' +  
                twoDecimal(this.percentage) + ' %'; 
            } 
        }, 
        plotOptions: { 
            pie: { 
                allowPointSelect: true, //允許選中，點選選中的扇形區可以分離出來顯示 
                cursor: 'pointer',  //當滑鼠指向扇形區時變為手型（可點選） 
                //showInLegend: true,  //如果要顯示圖例，可將該項設定為true 
                dataLabels: { 
                    enabled: true,  //設定資料標籤可見，即顯示每個扇形區對應的資料 
                    color: '#000000',  //資料顯示顏色 
                    connectorColor: '#999',  //設定資料域扇形區的連線線的顏色 
                    style:{ 
                        fontSize: '12px'  //資料顯示的大小 
                    }, 
                    formatter: function() { //格式化資料 
                        return '<b>' + this.point.name + '</b>: ' +  
                        twoDecimal(this.percentage) + ' %'; 
                    } 
                } 
            } 
        }, 
        series: [{ //資料列 
            name: 'search engine', 
            data: <?php echo $data;?> //核心資料列來源於php讀取的資料並解析成JSON 
        }] 
    }); 
}); 

上述程式碼中，核心資料data來源於pie.php中php轉換的json資料：$data。轉換後輸出的JSON資料格式為：

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

不用擔心，Highcharts會自動將JSON資料解析處理，並生成百分比的資料。

其實，Highcharts生成的餅狀圖還可以設定預設初始選中的扇形，即預設選中的扇形會從整圓形中分離出來，以便突出顯示。該效果要求預設data格式為：

[{"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}，這個字串如何用PHP得到呢？這就要修改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']) 
        ); 
    } 
} 
//合併陣列 
$arrs = array_merge($arr1,$arr); 
$data = json_encode($arrs); 

我們在迴圈遍歷結果集時，當id為1時，將該項設定為預設選中扇形區，構建陣列$arr1，否則構建另一個數組$arr，然後將這兩個數組合並，並將合併後的陣列轉換為json資料，供Highcharts呼叫。

此外，格式化資料市，如果要顯示百分比，可使用this.percentage，Highcharts會自動將整數轉換為百分數，如果要顯示資料量，直接使用this.y。

使用百分比：

formatter: function() { //格式化資料 
    return '<b>' + this.point.name + '</b>: ' + twoDecimal(this.percentage) + ' %'; 
} 

使用實際資料：

formatter: function() { //格式化資料 
    return '<b>' + this.point.name + '</b>: ' + this.y ; 

} 

注意：在使用百分比資料時，需要將資料強制保留兩位小數，否則有可能出現37.0000000001的情況，而實際上是37%。保留2位小數的JS函式twoDecimal()請下載本例demo原始碼。