使用Highcharts结合PHP与Mysql生成…

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

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



查看演示DEMO 下载源码

1、准备

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

2、PHP

在pie.php文件中，写入如下代码：

[code]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);

[/code]
代码中使用原生的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 '' + this.point.name + ': ' +

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 '' + this.point.name + ': ' +

twoDecimal(this.percentage) + ' %';

}

}

}

},

series: [{ //数据列

name: 'search engine',

data: