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 相关文章推荐
使用jQuery+HttpHandler+xml模拟一个三级联动的例子
Aug 09 Javascript
javascript获取flash版本号的方法
Nov 20 Javascript
javascript如何创建对象
Aug 29 Javascript
jQuery分页插件jquery.pagination.js使用方法解析
Feb 09 Javascript
详解vue表单验证组件 v-verify-plugin
Apr 19 Javascript
js模仿微信朋友圈计算时间显示几天/几小时/几分钟/几秒之前
Apr 27 Javascript
浅谈Vue.js中如何实现自定义下拉菜单指令
Jan 06 Javascript
JS实现的简单tab切换功能完整示例
Jun 20 Javascript
Vue路由前后端设计总结
Aug 06 Javascript
vue组件系列之TagsInput详解
May 14 Javascript
JavaScript高级程序设计之基本引用类型
Nov 17 Javascript
JS实现数组去重的11种方法总结
Apr 04 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数组去重的函数代码
2013/02/03 PHP
Zend Framework教程之视图组件Zend_View用法详解
2016/03/05 PHP
thinkphp项目部署到Linux服务器上报错“模板不存在”如何解决
2016/04/27 PHP
PHP使用标准库spl实现的观察者模式示例
2018/08/04 PHP
10个新的最有前途的JavaScript框架
2009/03/12 Javascript
jQuery阻止事件冒泡具体实现
2013/10/11 Javascript
理解Javascript图片预加载
2016/02/23 Javascript
JQuery日期插件datepicker的使用方法
2016/03/03 Javascript
JavaScript的this关键字的理解
2016/06/18 Javascript
AngularJs基于角色的前端访问控制的实现
2016/11/07 Javascript
微信小程序 传值取值的几种方法总结
2017/01/16 Javascript
详解使用vue脚手架工具搭建vue-webpack项目
2017/05/10 Javascript
JS组件系列之Gojs组件 前端图形化插件之利器
2017/11/29 Javascript
快速搭建vue2.0+boostrap项目的方法
2018/04/09 Javascript
Puppeteer环境搭建的详细步骤
2018/09/21 Javascript
js实现动态添加上传文件页面
2018/10/22 Javascript
jQuery实现的网站banner图片无缝轮播效果完整实例
2019/01/28 jQuery
Vue+elementui 实现复杂表头和动态增加列的二维表格功能
2019/09/23 Javascript
JavaScript 变量,数据类型基础实例详解【变量、字符串、数组、对象等】
2020/01/04 Javascript
深入flask之异步非堵塞实现代码示例
2018/07/31 Python
WIn10+Anaconda环境下安装PyTorch(避坑指南)
2019/01/30 Python
python获取引用对象的个数方式
2019/12/20 Python
如何基于python操作excel并获取内容
2019/12/24 Python
Matplotlib自定义坐标轴刻度的实现示例
2020/06/18 Python
Python 必须了解的5种高级特征
2020/09/10 Python
关于PySnooper 永远不要使用print进行调试的问题
2021/03/04 Python
解决Python import .pyd 可能遇到路径的问题
2021/03/04 Python
如果Session Bean得Remove方法一直都不被调用会怎么样
2012/07/14 面试题
消防安全管理制度
2014/02/01 职场文书
《动手做做看》教学反思
2014/04/09 职场文书
办理房产证委托书
2014/09/18 职场文书
本科毕业论文导师评语
2014/12/31 职场文书
干部理论学习心得体会
2016/01/21 职场文书
在 Golang 中实现 Cache::remember 方法详解
2021/03/30 Python
奇妙的 CSS shapes(CSS图形)
2021/04/05 HTML / CSS
python代码实现扫码关注公众号登录的实战
2021/11/01 Python