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

這篇文章主要為大家展示了“如何使用Highcharts結合PHP與生成餅狀圖”，內容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習一下“如何使用Highcharts結合PHP與Mysql生成餅狀圖”這篇文章吧。

1、準備

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

2、PHP

在pie.php文件中，寫(xiě)入如下代碼：

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查詢(xún)mysq數據的方法，將查詢(xún)的結果集保存在一個(gè)數組$arr里，并將該數組轉換 以備前端js調用。

3、Javascript

通過(guò)配置Highcharts，可以生成一個(gè)漂亮的餅狀圖，詳見(jiàn)代碼及注釋?zhuān)绻氵€不知道Highcharts是什么東東，請查閱本站（xuebuyuan.com）前面的相關(guān)文章。

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

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

[["u767eu5ea6",1239],["google",998],["u641cu641c",342],["u5fc5u5e94",421], ["u641cu72d7",259],["u5176u4ed6",83]]

不用擔心，Highcharts會(huì )自動(dòng)將JSON數據解析處理，并生成百分比的數據。

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

[{"name":"u767eu5ea6","y":1239,"sliced":true,"selected":true},["google",998], ["u641cu641c",342],["u5fc5u5e94",421],["u641cu72d7",259],["u5176u4ed6",83]]

注意看代碼中前部分：{"name":"u767eu5ea6","y":1239,"sliced":true,"selected":true}，這個(gè)字符串如何用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);

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

此外，格式化數據市，如果要顯示百分比，可使用this.percentage，Highcharts會(huì )自動(dòng)將整數轉換為百分數，如果要顯示數據量，直接使用this.y。

使用百分比：

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

使用實(shí)際數據：

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

注意：在使用百分比數據時(shí)，需要將數據強制保留兩位小數，否則有可能出現37.0000000001的情況，而實(shí)際上是37%。保留2位小數的JS函數twoDecimal()