PHP+mysql+Highcharts實(shí)現(xiàn)餅狀統(tǒng)計(jì)圖

joytoy

PHP+mysql+Highcharts實(shí)現(xiàn)餅狀統(tǒng)計(jì)圖。
此處貼代碼，詳細(xì)參考：http://www.lai18.com/content/409203.html
首先我們建一張・chart_pie・表作為統(tǒng)計(jì)數(shù)據(jù)。

1. -- Mysql
   
2. -- 首先我們建一張・chart_pie・表作為統(tǒng)計(jì)數(shù)據(jù)。
   
3. -- edit http://www.lai18.com
   
4. -- 表的結(jié)構(gòu) `chart_pie`
   
5. --
   
6.   
   
7. CREATE TABLE IF NOT EXISTS `chart_pie` (
   
8. `id` int(11) NOT NULL AUTO_INCREMENT,
   
9. `title` varchar(30) NOT NULL,
   
10. `pv` int(10) NOT NULL,
    
11. PRIMARY KEY (`id`)
    
12. ) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=7 ;
    
13.   
    
14. --
    
15. -- 轉(zhuǎn)存表中的數(shù)據(jù) `chart_pie`
    
16. --
    
17.   
    
18. INSERT INTO `chart_pie` (`id`, `title`, `pv`) VALUES
    
19. (1, '百度', 1239),
    
20. (2, 'google', 998),
    
21. (3, '搜搜', 342),
    
22. (4, '必應(yīng)', 421),
    
23. (5, '搜狗', 259),
    
24. (6, '其他', 83);

復(fù)制代碼

在pie.php我們要生成數(shù)據(jù)給前端調(diào)用

1. /*
   
2. * 在pie.php我們要生成數(shù)據(jù)給前端調(diào)用
   
3. * edit http://www.lai18.com
   
4. * PHP代碼
   
5. */
   
6. $query = mysql_query("select * from chart_pie");
   
7. while($row = mysql_fetch_array($query)){
   
8. $arr[] = array(
   
9.   $row['title'],intval($row['pv'])
   
10. );
    
11. }
    
12. $data = json_encode($arr);
    
13. jQuery
    
14. $(function() {
    
15. $('#highcharts').highcharts({
    
16.   chart: {
    
17.    renderTo: 'chart_pie',
    
18.    //餅狀圖關(guān)聯(lián)html元素id值
    
19.    defaultSeriesType: 'pie',
    
20.    //默認(rèn)圖表類型為餅狀圖
    
21.    plotBackgroundColor: '#ffc',
    
22.    //設(shè)置圖表區(qū)背景色
    
23.    plotShadow: true //設(shè)置陰影
    
24.   },
    
25.   title: {
    
26.    text: '搜索引擎統(tǒng)計(jì)分析' //圖表標(biāo)題
    
27.   },
    
28.   credits: {
    
29.    text: 'jb51.net'
    
30.   },
    
31.   tooltip: {
    
32.    formatter: function() { //鼠標(biāo)滑向圖像提示框的格式化提示信息
    
33.     return '<b>' + this.point.name + '</b>: ' + twoDecimal(this.percentage) + ' %';
    
34.    }
    
35.   },
    
36.   plotOptions: {
    
37.    pie: {
    
38.     allowPointSelect: true,
    
39.     //允許選中，點(diǎn)擊選中的扇形區(qū)可以分離出來(lái)顯示
    
40.     cursor: 'pointer',
    
41.     //當(dāng)鼠標(biāo)指向扇形區(qū)時(shí)變?yōu)槭中停�可點(diǎn)擊）
    
42.     //showInLegend: true, //如果要顯示圖例，可將該項(xiàng)設(shè)置為true
    
43.     dataLabels: {
    
44.      enabled: true,
    
45.      //設(shè)置數(shù)據(jù)標(biāo)簽可見(jiàn)，即顯示每個(gè)扇形區(qū)對(duì)應(yīng)的數(shù)據(jù)
    
46.      color: '#000000',
    
47.      //數(shù)據(jù)顯示顏色
    
48.      connectorColor: '#999',
    
49.      //設(shè)置數(shù)據(jù)域扇形區(qū)的連接線的顏色
    
50.      style: {
    
51.       fontSize: '12px' //數(shù)據(jù)顯示的大小
    
52.      },
    
53.      formatter: function() { //格式化數(shù)據(jù)
    
54.       return '<b>' + this.point.name + '</b>: ' + twoDecimal(this.percentage) + ' %';
    
55.       //return '<b>' + this.point.name + '</b>: ' + this.y ;
    
56.      }
    
57.     }
    
58.    }
    
59.   },
    
60.   series: [{ //數(shù)據(jù)列
    
61.    name: 'search engine',
    
62.    data: data //核心數(shù)據(jù)列來(lái)源于php讀取的數(shù)據(jù)并解析成JSON
    
63.   }]
    
64. });
    
65. });

復(fù)制代碼

此外，格式化數(shù)據(jù)市，如果要顯示百分比，可使用this.percentage

1. //此外，格式化數(shù)據(jù)市，如果要顯示百分比，可使用this.percentage
   
2. formatter: function() { //格式化數(shù)據(jù)
   
3. return '<b>' + this.point.name + '</b>: ' + twoDecimal(this.percentage) + ' %';
   
4. }

復(fù)制代碼

最后我們要保留兩位小數(shù)，代碼貼下

1. //最后我們要保留兩位小數(shù)，代碼貼下
   
2. // edit http://www.lai18.com
   
3. function twoDecimal(x) { //保留2位小數(shù)
   
4. var f_x = parseFloat(x);
   
5. if (isNaN(f_x)) {
   
6.   alert('錯(cuò)誤的參數(shù)');
   
7.   return false;
   
8. }
   
9. var f_x = Math.round(x * 100) / 100;
   
10. var s_x = f_x.toString();
    
11. var pos_decimal = s_x.indexOf('.');
    
12. if (pos_decimal < 0) {
    
13.   pos_decimal = s_x.length;
    
14.   s_x += '.';
    
15. }
    
16. while (s_x.length <= pos_decimal + 2) {
    
17.   s_x += '0';
    
18. }
    
19. return s_x;
    
20. }
    

復(fù)制代碼

renxiao2003

圖表技術(shù)在每個(gè)應(yīng)用中是必需的部分。