highcharts執行個體教程二:結合php與mysql產生餅圖,highcharts執行個體教程_PHP教程

來源:互聯網
上載者:User

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], ['Google', 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,轉載請註明出處。


使用highcharts結合js與mysql產生柱狀圖的問題

告訴你思路吧, 剩下的還得你自己摸索, 漲經驗, 漲姿勢啊~~~
php 讀取資料後, 組織資料為json格式, 由用戶端調用, 格式如下:
category: ["管理學院",'....."]
data: [ [136,215], [147,196], .....]
用戶端, 先調用 Highcharts.chart 構造圖表, 設定基本型裝為橫向的分組堆積圖
js通過ajax載入資料, 將資料設定到表徵圖的 category, series 中;
chart.redraw 即可.

具體你先看下 highcharts的所有sample, 那個比較合適你, 就直接照搬後, 想辦法修改資料即可.

 

利用Highcharts產生餅圖 怎給餅圖添加單擊事件,比如點擊餅圖的某一塊扇形,跳轉到一個連結

寫了個sample
jsfiddle.net/uep3T/3/
把plotoption裡面的alert替換成跳躍陳述式即可
 

http://www.bkjia.com/PHPjc/861533.htmlwww.bkjia.comtruehttp://www.bkjia.com/PHPjc/861533.htmlTechArticlehighcharts執行個體教程二:結合php與mysql產生餅圖,highcharts執行個體教程 上回我們分析了用highcharts結合php和mysql產生折線圖的執行個體,這次我們以技術...

  • 聯繫我們

    該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

    如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

    A Free Trial That Lets You Build Big!

    Start building with 50+ products and up to 12 months usage for Elastic Compute Service

    • Sales Support

      1 on 1 presale consultation

    • After-Sales Support

      24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.