溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要為大家展示了“如何使用Highcharts結合PHP與Mysql生成餅狀圖”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“如何使用Highcharts結合PHP與Mysql生成餅狀圖”這篇文章吧。
為了更好的講解，實例中在Mysql數據庫中建立一張表chart_pie，用于表示各搜索引擎帶來的訪問量，表中分別有id、title和pv三個字段，id是自增長整型、主鍵；title表示搜素引擎的名稱，pv表示對應的訪問量。chart_pie表中已預置了相關數據，如圖:
在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調用。
通過配置Highcharts，可以生成一個漂亮的餅狀圖，詳見代碼及注釋，如果你還不知道Highcharts是什么東東，請查閱本站（xuebuyuan.com）前面的相關文章。
var chart;
$(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'chart_pie', //餅狀圖關聯html元素id值
defaultSeriesType: 'pie', //默認圖表類型為餅狀圖
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, //允許選中，點擊選中的扇形區可以分離出來顯示
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數據格式為：
[["u767eu5ea6",1239],["google",998],["u641cu641c",342],["u5fc5u5e94",421],
["u641cu72d7",259],["u5176u4ed6",83]]
不用擔心，Highcharts會自動將JSON數據解析處理，并生成百分比的數據。
其實，Highcharts生成的餅狀圖還可以設置默認初始選中的扇形，即默認選中的扇形會從整圓形中分離出來，以便突出顯示。該效果要求默認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}，這個字符串如何用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()
以上是“如何使用Highcharts結合PHP與Mysql生成餅狀圖”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
