PHP mysql Highcharts生成餅狀圖

PHP mysql Highcharts生成餅狀圖

Mysql

首先我們建一張·chart_pie·表作為統計資料。


-- 
-- 表的結構 `chart_pie` 
-- 
CREATE TABLE IF NOT EXISTS `chart_pie` ( 
`id` int(11) NOT NULL AUTO_INCREMENT, 
`title` varchar(30) NOT NULL, 
`pv` int(10) NOT NULL, 
PRIMARY KEY (`id`) 
) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=7 ; 
-- 
-- 轉存表中的資料 `chart_pie` 
-- 
INSERT INTO `chart_pie` (`id`, `title`, `pv`) VALUES 
(1, '百度', 1239), 
(2, 'google', 998), 
(3, '搜搜', 342), 
(4, '必應', 421), 
(5, '搜狗', 259), 
(6, '其他', 83);

PHP

在pie.php我們要生成資料給前端呼叫:


$query = mysql_query("select * from chart_pie"); 
while($row = mysql_fetch_array($query)){ 
$arr[] = array( 
$row['title'],intval($row['pv']) 
); 
} 
$data = json_encode($arr);
jQuery
$(function() { 
$('#highcharts').highcharts({ 
chart: { 
renderTo: 'chart_pie', 
//餅狀圖關聯html元素id值 
defaultSeriesType: 'pie', 
//預設圖表型別為餅狀圖 
plotBackgroundColor: '#ffc', 
//設定圖表區背景色 
plotShadow: true //設定陰影 
}, 
title: { 
text: '搜尋引擎統計分析' //圖表標題 
}, 
credits: { 
text: 'jb51.net' 
}, 
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)   ' %'; 
//return '<b>'   this.point.name   '</b>: '   this.y ; 
} 
} 
} 
}, 
series: [{ //資料列 
name: 'search engine', 
data: data //核心資料列來源於php讀取的資料並解析成JSON 
}] 
}); 
});

此外,格式化資料市,如果要顯示百分比,可使用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 ; 
}

最後我們要保留兩位小數,程式碼貼下:


function twoDecimal(x) { //保留2位小數 
var f_x = parseFloat(x); 
if (isNaN(f_x)) { 
alert('錯誤的引數'); 
return false; 
} 
var f_x = Math.round(x * 100) / 100; 
var s_x = f_x.toString(); 
var pos_decimal = s_x.indexOf('.'); 
if (pos_decimal < 0) { 
pos_decimal = s_x.length; 
s_x  = '.'; 
} 
while (s_x.length <= pos_decimal   2) { 
s_x  = '0'; 
} 
return s_x; 
}

柱狀圖、餅狀圖、曲線圖等都是一樣的。

以上所述就是本文的全部內容了,希望大家能夠喜歡。

您可能感興趣的文章:

jQuery外掛HighCharts繪製2D柱狀圖、折線圖和餅圖的組合圖效果示例【附demo原始碼下載】jQuery外掛HighCharts繪製2D柱狀圖、折線圖的組合雙軸圖效果示例【附demo原始碼下載】jQuery外掛HighCharts實現2D柱狀圖、折線圖的組合多軸圖效果示例【附demo原始碼下載】jQuery外掛HighCharts實現的2D迴歸直線散點效果示例【附demo原始碼下載】jQuery外掛HighCharts實現的2D對數餅圖效果示例【附demo原始碼下載】jQuery外掛HighCharts繪製2D帶Label的折線圖效果示例【附demo原始碼下載】jQuery外掛HighCharts繪製的基本折線圖效果示例【附demo原始碼下載】Javascript highcharts 餅圖顯示數量和百分比例項程式碼jQuery Chart圖表製作元件Highcharts用法詳解jQuery.Highcharts.js繪製柱狀圖餅狀圖曲線圖淺析jquery的js圖表元件highchartsJQuery Highcharts 動態生成圖表的方法jQuery外掛HighCharts繪製2D金字塔圖效果示例【附demo原始碼下載】