开发者社区> cnbird> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

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

简介: http://www.helloweba.com/view-blog-159.html 我们在做复杂的数据统计功能时会用到饼状图,饼状图用整个圆表示总体的数量或整体值1,用圆内各个扇形的大小表示各部分数量或该部分占总体的百分比,它可以清晰直观的表示各部分之间以及各部分与整体之间的数量关系。
+关注继续查看

http://www.helloweba.com/view-blog-159.html

我们在做复杂的数据统计功能时会用到饼状图,饼状图用整个圆表示总体的数量或整体值1,用圆内各个扇形的大小表示各部分数量或该部分占总体的百分比,它可以清晰直观的表示各部分之间以及各部分与整体之间的数量关系。

本文将结合实际,使用PHP读取Mysql数据表中的数据,并将获取的数据按照要求输出给前端JS,再通过配置调用Highcharts图表库生成饼状图。

 

查看演示DEMO 下载源码

1、准备

为了更好的讲解,实例中在Mysql数据库中建立一张表chart_pie,用于表示各搜索引擎带来的访问量,表中分别有id、title和pv三个字段,id是自增长整型、主键;title表示搜素引擎的名称,pv表示对应的访问量。chart_pie表中已预置了相关数据,如图:

 

2、PHP

在pie.php文件中,写入如下代码:

include_once('connect.php'); //连接数据库 
$res = mysql_query("select * from chart_pie"); 
while($row = mysql_fetch_array($res)){ 
    $arr[] = array( 
        $row['title'],intval($row['pv']) 
    ); 
} 
$data = json_encode($arr); 

代码中使用原生的PHP查询mysq数据的方法,将查询的结果集保存在一个数组$arr里,并将该数组转换 以备前端js调用。

3、Javascript

通过配置Highcharts,可以生成一个漂亮的饼状图,详见代码及注释,如果你还不知道Highcharts是什么东东,请查阅本站(helloweba.com)前面的相关文章。

var chart; 
$(function() { 
    chart = new Highcharts.Chart({ 
        chart: { 
            renderTo: 'chart_pie',  //饼状图关联html元素id值 
            defaultSeriesType: 'pie'//默认图表类型为饼状图 
            plotBackgroundColor: '#ffc',  //设置图表区背景色 
            plotShadow: true   //设置阴影 
        }, 
        title: { 
            text: '搜索引擎统计分析'  //图表标题 
        }, 
        credits: { 
            text: 'helloweba.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) + ' %'; 
                    } 
                } 
            } 
        }, 
        series: [{ //数据列 
            name: 'search engine', 
            data: <?php echo $data;?> //核心数据列来源于php读取的数据并解析成JSON 
        }] 
    }); 
}); 

上述代码中,核心数据data来源于pie.php中php转换的json数据:$data。转换后输出的JSON数据格式为:

[["\u767e\u5ea6",1239],["google",998],["\u641c\u641c",342],["\u5fc5\u5e94",421], 
["\u641c\u72d7",259],["\u5176\u4ed6",83]]  

不用担心,Highcharts会自动将JSON数据解析处理,并生成百分比的数据。

其实,Highcharts生成的饼状图还可以设置默认初始选中的扇形,即默认选中的扇形会从整圆形中分离出来,以便突出显示。该效果要求默认data格式为:

[{"name":"\u767e\u5ea6","y":1239,"sliced":true,"selected":true},["google",998], 
["\u641c\u641c",342],["\u5fc5\u5e94",421],["\u641c\u72d7",259],["\u5176\u4ed6",83]]  

注意看代码中前部分:{"name":"\u767e\u5ea6","y":1239,"sliced":true,"selected":true},这个字符串如何用PHP得到呢?这就要修改pie.php中的php部分代码:

while($row = mysql_fetch_array($res)){ 
    if($row['id']==1){ 
        $arr1[] = array( 
            "name" =>  $row['title'], 
            "y" => intval($row['pv']), 
            "sliced" => true,  //默认分离 
            "selected" => true  //默认选中 
        );  
    }else{ 
        $arr[] = array( 
            $row['title'],intval($row['pv']) 
        ); 
    } 
} 
//合并数组 
$arrs = array_merge($arr1,$arr); 
$data = json_encode($arrs); 

我们在循环遍历结果集时,当id为1时,将该项设置为默认选中扇形区,构建数组$arr1,否则构建另一个数组$arr,然后将这两个数组合并,并将合并后的数组转换为json数据,供Highcharts调用。

此外,格式化数据市,如果要显示百分比,可使用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 ; 

} 

注意:在使用百分比数据时,需要将数据强制保留两位小数,否则有可能出现37.0000000001的情况,而实际上是37%。保留2位小数的JS函数twoDecimal()请下载本例demo源码。

声明:本文为原创文章,helloweba.com和作者拥有版权,如需转载,请注明来源于helloweba.com并保留原文链接,否则视为侵权。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
PHP连接MySQL 8.0报错的解决办法
PHP连接MySQL 8.0报错的解决办法
0 0
PHP连接MySQL 8.0报错的解决办法
PHP连接MySQL 8.0报错的解决办法
0 0
PHP+MySQL打造XXX管理系统
PHP+MySQL打造XXX管理系统
0 0
PHP error:mysql_fetch_row() expects parameter 1 to be resource, boolean given 的错误
PHP error:mysql_fetch_row() expects parameter 1 to be resource, boolean given 的错误
0 0
SaltStack安装Apache/Mysql/PHP部署Wordpress
SaltStack是一个服务器基础架构集中化管理平台,具备配置管理、远程执行、监控等功能,基于Python语言实现,结合轻量级消息队列(ZeroMQ)与Python第三方模块(Pyzmq、PyCrypto、Pyjinjia2、python-msgpack和PyYAML等)构建。 SaltStack 采用 C/S模式,server端就是salt的master,client端就是minion,minion与master之间通过ZeroMQ消息队列通信。 master监听4505和4506端口,4505对应的是ZMQ的PUB system,用来发送消息,4506对应的是REP system是来接受
0 0
【PHP秒杀系统】第一篇 环境准备即MySQL的封装
【PHP秒杀系统】第一篇 环境准备即MySQL的封装
0 0
MacOs M1 芯片分布式搭建 Nginx+PHP+MySQL和多站点域名访问
一、安装Nginx 问题:Mac 在安装nginx之前记得把原本的apache2给卸载删除了,要不然后期会出现端口号被占用,或者有时候nginx用不了
0 0
PHP处理MySQL关联查询
什么关联查询? a)在MySQL中的Select语句中,我们经常会有复杂的业务需要使用join子语句,包括left join、right join、inner join、left outer join、right outer join、full join b)那么使用以上几种方式进行表查询的时候、对数据库的压力是很大的,怎么个大法呢,我们来测试一下: i.首先我们先搞一些数据 class表200w数据 user表 40w数据 ii.我们接下来查询15个班级下面的所有学生
0 0
【PHP】从mysql取数据被强制转义
【PHP】从mysql取数据被强制转义
0 0
Highcharts+PHP+Mysql生成饼状统计图
演示下载地址:http://www.erdangjiade.com/js/50.html 效果图: Mysql 首先我们建一张·chart_pie·表作为统计数据。
697 0
+关注
cnbird
阿里云安全专家,主要负责阿里云云产品安全。
文章
问答
文章排行榜
最热
最新
相关电子书
更多
MySQL 5.7优化不求人
立即下载
好的 MySQL 兼容可以做到什么程度
立即下载
PostgresChina2018_张启程_为什么我们抛弃MongoDB和MySQL,选择PgSQL
立即下载