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

http://www.helloweba.com/view-blog-159.html 本文将结合实际，使用PHP读取Mysql数据表中的数据，并将获取的数据按照要求输出给前端JS，再通过配置调用Highcharts图表库生成饼状图。 1、准备 为了更好的讲解，实例中在Mysql数据库中建立一张表chart_pie，用

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

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

1、准备

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

 

2、PHP

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

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

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

3、Javascript

通过配置Highcharts，可以生成一个漂亮的饼状图，详见代码及注释，如果你还不知道Highcharts是什么东东，请查阅本站（helloweba.com

<code> <br><span>var</span> chart; <br>$(<span>function</span>() <span>{</span> <br>    chart = <span>new</span> Highcharts.Chart(<span>{</span> <br>        chart: <span>{</span> <br>            renderTo: <span>'chart_pie'</span>,  <span>//饼状图关联html元素id值</span> <br>            defaultSeriesType: <span>'pie'</span>, <span>//默认图表类型为饼状图</span> <br>            plotBackgroundColor: <span>'#ffc'</span>,  <span>//设置图表区背景色</span> <br>            plotShadow: true   <span>//设置阴影</span> <br>        <span>}</span>, <br>        title: <span>{</span> <br>            text: <span>'搜索引擎统计分析'</span>  <span>//图表标题</span> <br>        <span>}</span>, <br>        credits: <span>{</span> <br>            text: <span>'helloweba.com'</span> <br>        <span>}</span>, <br>        tooltip: <span>{</span> <br>            formatter: <span>function</span>() <span>{</span> <span>//鼠标滑向图像提示框的格式化提示信息</span> <br>                <span>return</span> <span>'<b>'</b></span> + <span>this</span>.point.name + <span>': '</span> +  <br>                twoDecimal(<span>this</span>.percentage) + <span>' %'</span>; <br>            <span>}</span> <br>        <span>}</span>, <br>        plotOptions: <span>{</span> <br>            pie: <span>{</span> <br>                allowPointSelect: true, <span>//允许选中，点击选中的扇形区可以分离出来显示</span> <br>                cursor: <span>'pointer'</span>,  <span>//当鼠标指向扇形区时变为手型（可点击）</span> <br>                <span>//showInLegend: true,  //如果要显示图例，可将该项设置为true</span> <br>                dataLabels: <span>{</span> <br>                    enabled: true,   <br>                    color: <span>'#000000'</span>,  <span>//数据显示颜色</span> <br>                    connectorColor: <span>'#999'</span>,  <span>//设置数据域扇形区的连接线的颜色</span> <br>                    style:<span>{</span> <br>                        fontSize: <span>'12px'</span>  <span>//数据显示的大小</span> <br>                    <span>}</span>, <br>                    formatter: <span>function</span>() <span>{</span> <span>//格式化数据</span> <br>                        <span>return</span> <span>'<b>'</b></span> + <span>this</span>.point.name + <span>': '</span> +  <br>                        twoDecimal(<span>this</span>.percentage) + <span>' %'</span>; <br>                    <span>}</span> <br>                <span>}</span> <br>            <span>}</span> <br>        <span>}</span>, <br>        series: [<span>{</span> <span>//数据列</span> <br>            name: <span>'search engine'</span>, <br>            data: <?php  echo $data;?> <span>//核心数据列来源于php读取的数据并解析成JSON</span> <br>        <span>}</span>] <br>    <span>}</span>); <br><span>}</span>); <br></code>

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

<code> <br>[[<span>"\u767e\u5ea6"</span>,<span>1239</span>],[<span>"google"</span>,<span>998</span>],[<span>"\u641c\u641c"</span>,<span>342</span>],[<span>"\u5fc5\u5e94"</span>,<span>421</span>], <br>[<span>"\u641c\u72d7"</span>,<span>259</span>],[<span>"\u5176\u4ed6"</span>,<span>83</span>]]  <br></code>

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

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

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

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

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

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

此外，格式化数据市，如果要显示百分比，可使用this.percentage，Highcharts会自动将整数转换为百分数，如果要显示数据量，直接使用this.y。

使用百分比：

<code> <br>formatter: <span>function</span>() <span>{</span> <span>//格式化数据</span> <br>    <span>return</span> <span>'<b>'</b></span> + <span>this</span>.point.name + <span>': '</span> + twoDecimal(<span>this</span>.percentage) + <span>' %'</span>; <br><span>}</span> <br></code>

使用实际数据：

<code> <br>formatter: <span>function</span>() <span>{</span> <span>//格式化数据</span> <br>    <span>return</span> <span>'<b>'</b></span> + <span>this</span>.point.name + <span>': '</span> + <span>this</span>.y ; <br><span>}</span> </code>