PHP+mysql+Highcharts生成饼状图


Posted in Javascript onMay 04, 2015

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: '3water.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) + ' %'; 
      //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; 
}

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

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
JavaScript CSS修改学习第五章 给“上传”添加样式
Feb 19 Javascript
js实现横向伸展开的二级导航菜单代码
Aug 28 Javascript
js实现简单的验证码
Dec 25 Javascript
canvas绘制环形进度条
Feb 23 Javascript
angularjs实现多张图片上传并预览功能
Feb 24 Javascript
JS点击动态添加标签、删除指定标签的代码
Apr 18 Javascript
JS选取DOM元素常见操作方法实例分析
Dec 10 Javascript
vue 实现cli3.0中使用proxy进行代理转发
Oct 30 Javascript
JS常用正则表达式超全集(密码强度校验,金额校验,IE版本,IPv4,IPv6校验)
Feb 03 Javascript
vue实现简易图片左右旋转,上一张,下一张组件案例
Jul 31 Javascript
vue axios请求成功却进入catch的原因分析
Sep 08 Javascript
antd Form组件方法getFieldsValue获取自定义组件的值操作
Oct 29 Javascript
jQuery实现仿Google首页拖动效果的方法
May 04 #Javascript
js检测判断日期大于多少天的方法
May 04 #Javascript
jQuery实现表格展开与折叠的方法
May 04 #Javascript
JS数字抽奖游戏实现方法
May 04 #Javascript
JS实现跟随鼠标立体翻转图片的方法
May 04 #Javascript
js实现使用鼠标拖拽切换图片的方法
May 04 #Javascript
js实现每日自动换一张图片的方法
May 04 #Javascript
You might like
PHP Token(令牌)设计
2008/03/15 PHP
在PHP中使用X-SendFile头让文件下载更快
2014/06/01 PHP
PHP用正则匹配form表单中所有元素的类型和属性值实例代码
2017/02/28 PHP
PHP实现根据密码长度显示安全条
2017/07/04 PHP
PHP封装的数据库模型Model类完整示例【基于PDO】
2019/03/14 PHP
利用WebBrowser彻底解决Web打印问题(包括后台打印)
2009/06/22 Javascript
ExtJS Grid使用SimpleStore、多选框的方法
2009/11/20 Javascript
jquery lazyload延迟加载技术的实现原理分析
2011/01/24 Javascript
jquery easyui combobox模糊过滤(示例代码)
2013/11/30 Javascript
javascript给span标签赋值的方法
2015/11/26 Javascript
教你JS中的运算符乘方、开方及变量格式转换
2016/08/09 Javascript
Angular 4.x 路由快速入门学习
2017/05/03 Javascript
vue2.0项目实现路由跳转的方法详解
2018/06/21 Javascript
Angular中使用ng-zorro图标库部分图标不能正常显示问题
2019/04/22 Javascript
Vue路由对象属性 .meta $route.matched详解
2019/11/04 Javascript
vue 实现基础组件的自动化全局注册
2020/12/25 Vue.js
[04:19]DOTA2亚洲邀请赛 现场花絮
2015/03/11 DOTA
kNN算法python实现和简单数字识别的方法
2014/11/18 Python
使用python实现个性化词云的方法
2017/06/16 Python
python3.6+django2.0开发一套学员管理系统
2018/03/03 Python
django使用LDAP验证的方法示例
2018/12/10 Python
Python中常用的8种字符串操作方法
2019/05/06 Python
python接口调用已训练好的caffe模型测试分类方法
2019/08/26 Python
Python流程控制 while循环实现解析
2019/09/02 Python
Python基础之函数基本用法与进阶详解
2020/01/02 Python
如何基于Python + requests实现发送HTTP请求
2020/01/13 Python
香港最大的洋酒零售连锁店:屈臣氏酒窖(Watson’s Wine)
2018/12/10 全球购物
新西兰最大、占有率最高的综合性药房:PharmacyDirect药房中文网
2020/11/03 全球购物
如何处理简单的PHP错误
2015/10/14 面试题
2014年圣诞节促销方案
2014/03/14 职场文书
春节联欢会策划方案
2014/05/16 职场文书
市级青年文明号申报材料
2014/05/26 职场文书
计算机实训报告总结
2014/11/05 职场文书
客户经理岗位职责大全
2015/04/09 职场文书
幼儿园国培研修日志
2015/11/13 职场文书
Pygame如何使用精灵和碰撞检测
2021/11/17 Python