highcharts实例教程二:结合php与mysql生成饼图,highcharts实例教程
highcharts实例教程二:结合php与mysql生成饼图,highcharts实例教程
上回我们分析了用highcharts结合php和mysql生成折线图的实例,这次我们以技术cto网站搜索引擎流量为例利用highcharts生成饼图。
饼图通常用在我们需要直观地显示各个部分所占的比例的时候,比如我们需要统计各大搜索引擎来的流量比例。
第一步:创建数据库保存各搜索引擎流量的pv数
CREATE TABLE `pie` (
`id` int(10) NOT NULL AUTO_INCREMENT,
`title` varchar(30) NOT NULL,
`pv` int(10) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=7 DEFAULT CHARSET=utf8;
第二步:编写php代码获取数据,转换为highcharts能够渲染的数据格式,highcharts能够解析json格式的数据,比如:[ ['百度', 120], ['谷歌', 86] ];
include_once('connect.php');
$res = mysql_query("select * from pie");
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);
需要特别注意的是数字的话必须要加上intval转换,不然highcharts不会识别;
本文出自技术CTO:http://www.jscto.net,转载请注明出处。
告诉你思路吧, 剩下的还得你自己摸索, 涨经验, 涨姿势啊~~~
php 读取数据后, 组织数据为json格式, 由客户端调用, 格式如下:
category: ["管理学院",'....."]
data: [ [136,215], [147,196], .....]
客户端, 先调用 Highcharts.chart 构造图表, 设定基本型装为横向的分组堆积图
js通过ajax加载数据, 将数据设置到图标的 category, series 中;
chart.redraw 即可.
具体你先看下 highcharts的所有sample, 那个比较合适你, 就直接照搬后, 想办法修改数据即可.
写了个sample
jsfiddle.net/uep3T/3/
把plotoption里面的alert替换成跳转语句即可

ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

人気の記事

ホットツール

Safe Exam Browser
Safe Exam Browser は、オンライン試験を安全に受験するための安全なブラウザ環境です。このソフトウェアは、あらゆるコンピュータを安全なワークステーションに変えます。あらゆるユーティリティへのアクセスを制御し、学生が無許可のリソースを使用するのを防ぎます。

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

mPDF
mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。

SublimeText3 中国語版
中国語版、とても使いやすい

AtomエディタMac版ダウンロード
最も人気のあるオープンソースエディター

ホットトピック









