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 相关文章推荐
23个Javascript弹出窗口特效整理
Feb 25 Javascript
Jquery实现仿新浪微博获取文本框能输入的字数代码
Feb 22 Javascript
JQuery的read函数与js的onload不同方式实现
Mar 18 Javascript
关于JavaScript与HTML的交互事件
Apr 12 Javascript
jQuery+ajax实现鼠标单击修改内容的方法
Jun 27 Javascript
jQuery密码强度检测插件passwordStrength用法实例分析
Oct 30 Javascript
jquery实现全屏滚动
Dec 28 Javascript
JavaScript代码实现左右上下自动晃动自动移动
Apr 08 Javascript
jquery checkbox无法用attr()二次勾选问题的解决方法
Jul 22 Javascript
JS中的三个循环小结
Jun 20 Javascript
Node.js 多线程完全指南总结
Mar 27 Javascript
Javascript查看大图功能代码实现
May 07 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
Smarty简单生成表单元素的方法示例
2016/05/23 PHP
php 截取utf-8格式的字符串实例代码
2016/10/30 PHP
PHP使用preg_split和explode分割textarea存放内容的方法分析
2017/07/03 PHP
PHP 中 var_export、print_r、var_dump 调试中的区别
2018/06/19 PHP
彪哥1.1(智能表格)提供下载
2006/09/07 Javascript
js导航菜单(自写)简单大方
2013/03/28 Javascript
jQuery之ajax删除详解
2014/02/27 Javascript
使用impress.js制作幻灯片
2015/09/09 Javascript
jQuery实现分章节锚点“回到顶部”动画特效代码
2015/10/23 Javascript
JavaScript中Window对象的属性及事件
2015/12/25 Javascript
jQuery 3.0 的变化及使用方法
2016/02/01 Javascript
JavaScript的==运算详解
2016/07/20 Javascript
javaScript中定义类或对象的五种方式总结
2016/12/04 Javascript
Bootstrap实现基于carousel.js框架的轮播图效果
2017/05/02 Javascript
使用travis-ci如何持续部署node.js应用详解
2017/07/30 Javascript
jQuery图片查看插件Magnify开发详解
2017/12/25 jQuery
vue文件运行的方法教学
2019/02/12 Javascript
js实现固定区域内的不重叠随机圆
2019/10/24 Javascript
openlayers4.6.5实现距离量测和面积量测
2020/09/25 Javascript
pandas apply 函数 实现多进程的示例讲解
2018/04/20 Python
Python实现删除时保留特定文件夹和文件的示例
2018/04/27 Python
Django REST Framework序列化外键获取外键的值方法
2019/07/26 Python
python实现ip地址查询经纬度定位详解
2019/08/30 Python
Pytorch修改ResNet模型全连接层进行直接训练实例
2019/09/10 Python
python3读取csv文件任意行列代码实例
2020/01/13 Python
浅谈python累加求和+奇偶数求和_break_continue
2020/02/25 Python
深入了解python列表(LIST)
2020/06/08 Python
使用ITK-SNAP进行抠图操作并保存mask的实例
2020/07/01 Python
生产班组长岗位职责
2014/01/05 职场文书
致全体运动员广播稿
2014/02/01 职场文书
群众路线领导干部个人对照检查材料(集锦)
2014/09/23 职场文书
2014年学校团委工作总结
2014/12/20 职场文书
研究生导师推荐信
2015/03/25 职场文书
上市公司财务总监岗位职责
2015/04/03 职场文书
「约定的梦幻岛」作画发布诺曼生日新绘
2022/03/21 日漫
mysql5.5中文乱码问题解决的有用方法
2022/05/30 MySQL