highcharts实例教程二：结合php与mysql生成饼图，highcharts实例教程_PHP教程

豆包AI编程

豆包推出的AI编程助手

483

查看详情

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替换成跳转语句即可