search

Home >php教程 >php手册 >PHP+mysql+Highcharts实现饼状统计图

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

WBOY
WBOYOriginal
2016-06-13 08:58:471440browse

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

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



Mysql
首先我们建一张?chart_pie?表作为统计数据。
-- edit http://www.lai18.com 
-- 表的结构 `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我们要生成数据给前端调用（参考：http://www.lai18.com/content/409203.html）：
/* edit http://www.lai18.com
 * 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 &#39;<b>&#39; + this.point.name + &#39;</b>: &#39; + twoDecimal(this.percentage) + &#39; %&#39;; 
   } 
  }, 
  plotOptions: { 
   pie: { 
    allowPointSelect: true, 
    //允许选中，点击选中的扇形区可以分离出来显示 
    cursor: &#39;pointer&#39;, 
    //当鼠标指向扇形区时变为手型（可点击） 
    //showInLegend: true, //如果要显示图例，可将该项设置为true 
    dataLabels: { 
     enabled: true, 
     //设置数据标签可见，即显示每个扇形区对应的数据 
     color: &#39;#000000&#39;, 
     //数据显示颜色 
     connectorColor: &#39;#999&#39;, 
     //设置数据域扇形区的连接线的颜色 
     style: { 
      fontSize: &#39;12px&#39; //数据显示的大小 
     }, 
     formatter: function() { //格式化数据 
      return &#39;<b>&#39; + this.point.name + &#39;</b>: &#39; + twoDecimal(this.percentage) + &#39; %&#39;; 
      //return &#39;<b>&#39; + this.point.name + &#39;</b>: &#39; + this.y ; 
     } 
    } 
   } 
  }, 
  series: [{ //数据列 
   name: &#39;search engine&#39;, 
   data: data //核心数据列来源于php读取的数据并解析成JSON 
  }] 
 }); 
});


此外，格式化数据市，如果要显示百分比，可使用this.percentage，Highcharts会自动将整数转换为百分数，如果要显示数据量，直接使用this.y。

百分比代码如下：
formatter: function() { //格式化数据 
 return &#39;<b>&#39; + this.point.name + &#39;</b>: &#39; + twoDecimal(this.percentage) + &#39; %&#39;; 
}


实际数据是这样的：
/* edit http://www.lai18.com
 * JS代码
 */
formatter: function() { //格式化数据 
 return &#39;<b>&#39; + this.point.name + &#39;</b>: &#39; + this.y ; 
}


最后我们要保留两位小数，代码贴下：
function twoDecimal(x) { //保留2位小数 
 var f_x = parseFloat(x); 
 if (isNaN(f_x)) { 
  alert(&#39;错误的参数&#39;); 
  return false; 
 } 
 var f_x = Math.round(x * 100) / 100; 
 var s_x = f_x.toString(); 
 var pos_decimal = s_x.indexOf(&#39;.&#39;); 
 if (pos_decimal < 0) { 
  pos_decimal = s_x.length; 
  s_x += &#39;.&#39;; 
 } 
 while (s_x.length <= pos_decimal + 2) { 
  s_x += &#39;0&#39;; 
 } 
 return s_x; 
}


柱状图、饼状图、曲线图等都是一样的。


更多JS插件

《JQuery常用插件教程》系列技术文章整理收藏

1使用jquery插件实现图片延迟加载技术详细说明

2纯JAVASCRIPT图表动画插件Highcharts Examples

3Highcharts-功能强大的图表库的应用

4Highcharts选项配置详细说明文档

5使用Highcharts生成折线图与曲线图

6使用Highcharts生成柱状图

7使用Highcharts结合PHP与Mysql生成饼状图

8使用Highcharts实现柱状图、饼状图、曲线图三图合一

9jQuery时间轴插件：jQuery Timelinr

10Zclip：复制页面内容到剪贴板兼容各浏览器

11Highcharts 非常实用的Javascript统计图demo示例

12iPictrue：图片标注提示

13使用jquery.qrcode生成二维码

14Highcharts报表插件多余小数位BUG的修复

15日程安排FullCalendar

16FullCalendar日历插件说明文档

17FullCalendar应用——读取JSON数据

18FullCalendar应用——新建日程事件

19FullCalendar应用——编辑与删除日程事件

20FullCalendar应用——拖动与实时保存

21JQuery Highcharts 动态生成图表的方法

22FullCalendar应用——整合农历节气和节日

23Highcharts图表库使用教程[Highcharts详细参数配置]

24浅析jquery的js图表组件highcharts

25使用jquery实现的一个图片延迟加载插件（含图片延迟加载原理）

26AMD异步模块定义介绍和Require.js中使用jQuery及jQuery插件的方法

27使用jquery.upload.js实现异步上传示例代码

28使用jquery.qrcode生成彩色二维码实例

29使用jquery.validate自定义方法实现手机号码或者固话至少填写一个的逻辑验证

30使用jQuery.wechat构建微信WEB应用

31使用JQ来编写最基本的淡入淡出效果附演示动画

32使用jquery菜单插件HoverTree仿京东无限级菜单

33使用jQuery jqPlot插件绘制柱状图

34SyntaxHighlighter 3.0.83使用笔记

35基于jQuery带备忘录功能的日期选择器

36JavaScript人脸检测的实现方法

37jQuery延迟加载(懒加载)插件 – jquery.lazyload.js

38在父页面得到zTree已选中的节点的方法

39使用jquery组件qrcode生成二维码及应用指南

40jQuery Highcharts折线图案例分析

41jquery.uploadify插件在chrome浏览器频繁崩溃解决方法

42jQuery.Highcharts.js绘制柱状图饼状图曲线图

43jQuery实现精美的多级下拉菜单特效

44jQuery实现加入购物车飞入动画效果

45jQuery+slidereveal实现的面板滑动侧边展出效果

46PHP+mysql+Highcharts生成饼状图

47AspNet中使用JQuery上传插件Uploadify详解

48AspNet中使用JQuery boxy插件的确认框

49ajax读取数据后使用jqchart显示图表的方法

 

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：PHP输出缓冲控制Output Control系列函数详解，output函数详解Next article：PHP.ini安全配置检测工具pcc简单介绍，php.inipcc

Related articles

See more