使用Highcharts結合PHP與Mysql生成餅狀圖

[轉]使用Highcharts結合PHP與Mysql生成餅狀圖

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

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

 

 

一、準備

爲了更好的講解，實例中在Mysql數據庫中創建一張表chart_pie，用於表示各搜索引擎帶來的訪問量，表中分別有id、title和pv三個字段，id是自增加整型、主鍵；title表示搜素引擎的名稱，pv表示對應的訪問量。chart_pie表中已預置了相關數據，如圖:

 

二、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調用。

三、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源碼。