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>
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
DVWA
Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、
EditPlus 中国語クラック版
サイズが小さく、構文の強調表示、コード プロンプト機能はサポートされていません
ドリームウィーバー CS6
ビジュアル Web 開発ツール
MantisBT
Mantis は、製品の欠陥追跡を支援するために設計された、導入が簡単な Web ベースの欠陥追跡ツールです。 PHP、MySQL、Web サーバーが必要です。デモおよびホスティング サービスをチェックしてください。
Safe Exam Browser
Safe Exam Browser は、オンライン試験を安全に受験するための安全なブラウザ環境です。このソフトウェアは、あらゆるコンピュータを安全なワークステーションに変えます。あらゆるユーティリティへのアクセスを制御し、学生が無許可のリソースを使用するのを防ぎます。
