http://www.helloweba.com/view-blog-159.html 本文将结合实际，使用PHP读取Mysql数据表中的数据，并将获取的数据按照要求输出给前端JS，再通过配置调用Highcharts图表库生成饼状图。 1、准备 为了更好的讲解，实例中在Mysql数据库中建立一张表chart_pie，用
http://www.helloweba.com/view-blog-159.html
citySHOP是一款集CMS、网店、商品、分类信息、论坛等为一体的城市多用户商城系统，已完美整合目前流行的Discuz! 6.0论坛，采用最新的5.0版PHP+MYSQL技术。面向对象的数据库连接机制，缓存及80%静态化处理，使它能最大程度减轻服务器负担，为您节约建设成本。多级店铺区分及联盟商户地图标注，实体店与虚拟完美结合。个性化的店铺系统，会员后台一体化管理。后台登陆初始网站密匙：LOVES
0
本文将结合实际，使用PHP读取Mysql数据表中的数据，并将获取的数据按照要求输出给前端JS，再通过配置调用Highcharts图表库生成饼状图。
为了更好的讲解，实例中在Mysql数据库中建立一张表chart_pie，用于表示各搜索引擎带来的访问量，表中分别有id、title和pv三个字段，id是自增长整型、主键；title表示搜素引擎的名称，pv表示对应的访问量。chart_pie表中已预置了相关数据，如图:
在pie.php文件中，写入如下代码：
<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>代码中使用原生的PHP查询mysq数据的方法，将查询的结果集保存在一个数组$arr里，并将该数组转换 以备前端js调用。
通过配置Highcharts，可以生成一个漂亮的饼状图，详见代码及注释，如果你还不知道Highcharts是什么东东，请查阅本站（helloweba.com
<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>'</span> + <span>this</span>.point.name + <span>'</b>: '</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>'</span> + <span>this</span>.point.name + <span>'</b>: '</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>上述代码中，核心数据data来源于pie.php中php转换的json数据：$data。转换后输出的JSON数据格式为：
<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>
不用担心，Highcharts会自动将JSON数据解析处理，并生成百分比的数据。
其实，Highcharts生成的饼状图还可以设置默认初始选中的扇形，即默认选中的扇形会从整圆形中分离出来，以便突出显示。该效果要求默认data格式为：
<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>注意看代码中前部分：{"name":"\u767e\u5ea6","y":1239,"sliced":true,"selected":true}，这个字符串如何用PHP得到呢？这就要修改pie.php中的php部分代码：
<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>我们在循环遍历结果集时，当id为1时，将该项设置为默认选中扇形区，构建数组$arr1，否则构建另一个数组$arr，然后将这两个数组合并，并将合并后的数组转换为json数据，供Highcharts调用。
此外，格式化数据市，如果要显示百分比，可使用this.percentage，Highcharts会自动将整数转换为百分数，如果要显示数据量，直接使用this.y。
使用百分比：
<br>formatter: <span>function</span>() <span>{</span> <span>//格式化数据</span> <br> <span>return</span> <span>'<b>'</span> + <span>this</span>.point.name + <span>'</b>: '</span> + twoDecimal(<span>this</span>.percentage) + <span>' %'</span>; <br><span>}</span> <br>使用实际数据：
<br>formatter: <span>function</span>() <span>{</span> <span>//格式化数据</span> <br> <span>return</span> <span>'<b>'</span> + <span>this</span>.point.name + <span>'</b>: '</span> + <span>this</span>.y ; <br><span>}</span> 
PHP怎么学习？PHP怎么入门？PHP在哪学？PHP怎么学才快？不用担心，这里为大家提供了PHP速学教程(入门到精通)，有需要的小伙伴保存下载就能学习啦！
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
11059
收藏
取消收藏
