PHP+mysql+Highcharts实现饼状统计图

joytoy

PHP+mysql+Highcharts实现饼状统计图。
此处贴代码，详细参考：http://www.lai18.com/content/409203.html
首先我们建一张・chart_pie・表作为统计数据。

1. -- Mysql
   
2. -- 首先我们建一张・chart_pie・表作为统计数据。
   
3. -- edit http://www.lai18.com
   
4. -- 表的结构 `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. -- 转存表中的数据 `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, '必应', 421),
    
23. (5, '搜狗', 259),
    
24. (6, '其他', 83);

复制代码

在pie.php我们要生成数据给前端调用

1. /*
   
2. * 在pie.php我们要生成数据给前端调用
   
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.    //饼状图关联html元素id值
    
19.    defaultSeriesType: 'pie',
    
20.    //默认图表类型为饼状图
    
21.    plotBackgroundColor: '#ffc',
    
22.    //设置图表区背景色
    
23.    plotShadow: true //设置阴影
    
24.   },
    
25.   title: {
    
26.    text: '搜索引擎统计分析' //图表标题
    
27.   },
    
28.   credits: {
    
29.    text: 'jb51.net'
    
30.   },
    
31.   tooltip: {
    
32.    formatter: function() { //鼠标滑向图像提示框的格式化提示信息
    
33.     return '<b>' + this.point.name + '</b>: ' + twoDecimal(this.percentage) + ' %';
    
34.    }
    
35.   },
    
36.   plotOptions: {
    
37.    pie: {
    
38.     allowPointSelect: true,
    
39.     //允许选中，点击选中的扇形区可以分离出来显示
    
40.     cursor: 'pointer',
    
41.     //当鼠标指向扇形区时变为手型（可点击）
    
42.     //showInLegend: true, //如果要显示图例，可将该项设置为true
    
43.     dataLabels: {
    
44.      enabled: true,
    
45.      //设置数据标签可见，即显示每个扇形区对应的数据
    
46.      color: '#000000',
    
47.      //数据显示颜色
    
48.      connectorColor: '#999',
    
49.      //设置数据域扇形区的连接线的颜色
    
50.      style: {
    
51.       fontSize: '12px' //数据显示的大小
    
52.      },
    
53.      formatter: function() { //格式化数据
    
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: [{ //数据列
    
61.    name: 'search engine',
    
62.    data: data //核心数据列来源于php读取的数据并解析成JSON
    
63.   }]
    
64. });
    
65. });

复制代码

此外，格式化数据市，如果要显示百分比，可使用this.percentage

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

复制代码

最后我们要保留两位小数，代码贴下

1. //最后我们要保留两位小数，代码贴下
   
2. // edit http://www.lai18.com
   
3. function twoDecimal(x) { //保留2位小数
   
4. var f_x = parseFloat(x);
   
5. if (isNaN(f_x)) {
   
6.   alert('错误的参数');
   
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. }
    

复制代码

renxiao2003

图表技术在每个应用中是必需的部分。