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 相关文章推荐
才发现的超链接js导致网页中GIF动画停止的解决方法
Nov 02 Javascript
js 新浪的一个图片播放图片轮换效果代码
Jul 15 Javascript
JavaScript高级程序设计阅读笔记(六) ECMAScript中的运算符(二)
Feb 27 Javascript
Jquery通过JSON字符串创建JSON对象
Aug 24 Javascript
做web开发 先学JavaScript
Dec 12 Javascript
js实现透明度渐变效果的方法
Apr 10 Javascript
jQuery横向擦除焦点图特效代码分享
Sep 06 Javascript
javascript精确统计网站访问量实例代码
Dec 19 Javascript
利用JS实现scroll自定义滚动效果详解
Oct 17 Javascript
JavaScript之实现一个简单的Vue示例
Jan 17 Javascript
JS加载解析Markdown文档过程详解
May 19 Javascript
JavaScript如何优化逻辑判断代码详解
Jun 08 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关联数组快速排序的方法
2015/04/17 PHP
PHP实现网站应用微信登录功能详解
2019/04/11 PHP
jquery下onpropertychange事件的绑定方法
2010/08/01 Javascript
Node.js和PHP根据ip获取地理位置的方法
2014/03/14 Javascript
JavaScript给url网址进行encode编码的方法
2015/03/18 Javascript
jquery实现的代替传统checkbox样式插件
2015/06/19 Javascript
jQuery实现多级联动下拉列表查询框
2016/01/18 Javascript
ES6学习教程之块级作用域详解
2017/10/09 Javascript
Scala解析Json字符串的实例详解
2017/10/11 Javascript
详解JavaScript事件循环机制
2018/09/07 Javascript
一秒学会微信小程序制作table表格
2019/02/14 Javascript
vue路由传参页面刷新参数丢失问题解决方案
2019/10/08 Javascript
vue使用showdown并实现代码区域高亮的示例代码
2019/10/17 Javascript
vue动态合并单元格并添加小计合计功能示例
2020/11/26 Vue.js
[02:25]DOTA2英雄基础教程 生死判决瘟疫法师
2013/12/06 DOTA
使用Python操作Elasticsearch数据索引的教程
2015/04/08 Python
Django框架下在URLconf中指定视图缓存的方法
2015/07/23 Python
Python网络爬虫与信息提取(实例讲解)
2017/08/29 Python
使用Python爬了4400条淘宝商品数据,竟发现了这些“潜规则”
2018/03/23 Python
Python错误处理操作示例
2018/07/18 Python
Python3实现的反转单链表算法示例
2019/03/08 Python
Django后台管理系统的图文使用教学
2020/01/20 Python
Python实现新型冠状病毒传播模型及预测代码实例
2020/02/05 Python
使用python图形模块turtle库绘制樱花、玫瑰、圣诞树代码实例
2020/03/16 Python
HTML5触摸事件演化tap事件介绍
2016/03/25 HTML / CSS
canvas学习和滤镜实现代码
2018/08/22 HTML / CSS
值类型与引用类型有什么不同?请举例说明?并分别列举几种相应的数据类型
2015/10/24 面试题
水污染治理专业毕业生推荐信
2013/11/14 职场文书
中专生自我鉴定书范文
2013/12/28 职场文书
运动会通讯稿100字
2014/01/31 职场文书
副检察长四风问题对照检查材料思想汇报
2014/10/07 职场文书
党员个人自我评价
2015/03/03 职场文书
水电施工员岗位职责
2015/04/11 职场文书
读《教育心理学》心得体会
2016/01/22 职场文书
MySQL 逻辑备份与恢复测试的相关总结
2021/05/14 MySQL
把77A收信机改造成收音机
2022/04/05 无线电