如何使用Highcharts結(jié)合PHP與Mysql生成餅狀圖

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

1、準(zhǔn)備

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

2、PHP

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

include_once('connect.php'); //連接數(shù)據(jù)庫(kù) $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數(shù)據(jù)的方法，將查詢的結(jié)果集保存在一個(gè)數(shù)組$arr里，并將該數(shù)組轉(zhuǎn)換 以備前端js調(diào)用。

3、Javascript

通過配置Highcharts，可以生成一個(gè)漂亮的餅狀圖，詳見代碼及注釋，如果你還不知道Highcharts是什么東東，請(qǐng)查閱本站（xuebuyuan.com）前面的相關(guān)文章。

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

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

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

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

其實(shí)，Highcharts生成的餅狀圖還可以設(shè)置默認(rèn)初始選中的扇形，即默認(rèn)選中的扇形會(huì)從整圓形中分離出來(lái)，以便突出顯示。該效果要求默認(rèn)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,  //默認(rèn)分離 "selected" => true  //默認(rèn)選中 ); }else{ $arr[] = array(    $row['title'],intval($row['pv'])    ); } } //合并數(shù)組 $arrs = array_merge($arr1,$arr); $data = json_encode($arrs);

我們?cè)谘h(huán)遍歷結(jié)果集時(shí)，當(dāng)id為1時(shí)，將該項(xiàng)設(shè)置為默認(rèn)選中扇形區(qū)，構(gòu)建數(shù)組$arr1，否則構(gòu)建另一個(gè)數(shù)組$arr，然后將這兩個(gè)數(shù)組合并，并將合并后的數(shù)組轉(zhuǎn)換為json數(shù)據(jù)，供Highcharts調(diào)用。

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

使用百分比：

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

使用實(shí)際數(shù)據(jù)：

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

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

以上是“如何使用Highcharts結(jié)合PHP與Mysql生成餅狀圖”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！