search
Homephp教程php手册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,转载请注明出处。

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

Statement
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
如何在Highcharts中使用动态数据来展示实时数据如何在Highcharts中使用动态数据来展示实时数据Dec 17, 2023 pm 06:57 PM

如何在Highcharts中使用动态数据来展示实时数据随着大数据时代的到来,对于实时数据的展示变得越来越重要。Highcharts作为一种流行的图表库,提供了丰富的功能和可定制性,使得我们可以灵活地展示实时数据。本文将介绍如何在Highcharts中使用动态数据来展示实时数据,并给出具体的代码示例。首先,我们需要准备一个能够提供实时数据的数据源。在本文中,我

如何在Highcharts中使用桑基图来展示数据如何在Highcharts中使用桑基图来展示数据Dec 17, 2023 pm 04:41 PM

如何在Highcharts中使用桑基图来展示数据桑基图(SankeyDiagram)是一种用于可视化流量、能源、资金等复杂流程的图表类型。它能清晰展示各个节点之间的关系和流动情况,可以帮助我们更好地理解和分析数据。在本文中,我们将介绍如何使用Highcharts来创建和定制一个桑基图,并附上具体的代码示例。首先,我们需要加载Highcharts库和Sank

如何在Highcharts中使用堆叠图表来展示数据如何在Highcharts中使用堆叠图表来展示数据Dec 18, 2023 pm 05:56 PM

如何在Highcharts中使用堆叠图表来展示数据堆叠图表是一种常见的数据可视化方式,它可以同时展示多个数据系列的总和,并以柱状图的形式显示每个数据系列的贡献。Highcharts是一款功能强大的JavaScript库,提供了丰富的图表种类和灵活的配置选项,可以满足各种数据可视化的需求。在本文中,我们将介绍如何使用Highcharts来创建一个堆叠图表,并提

如何使用Highcharts创建地图热力图如何使用Highcharts创建地图热力图Dec 17, 2023 pm 04:06 PM

如何使用Highcharts创建地图热力图,需要具体代码示例热力图是一种可视化的数据展示方式,能够通过不同颜色深浅来表示各个区域的数据分布情况。在数据可视化领域,Highcharts是一个非常受欢迎的JavaScript库,它提供了丰富的图表类型和交互功能。本文将介绍如何使用Highcharts创建地图热力图,并提供具体的代码示例。首先,我们需要准备一些数据

如何使用Highcharts创建甘特图表如何使用Highcharts创建甘特图表Dec 17, 2023 pm 07:23 PM

如何使用Highcharts创建甘特图表,需要具体代码示例引言:甘特图是一种常用于展示项目进度和时间管理的图表形式,能够直观地展示任务的开始时间、结束时间和进度。Highcharts是一款功能强大的JavaScript图表库,提供了丰富的图表类型和灵活的配置选项。本文将介绍如何使用Highcharts创建甘特图表,并给出具体的代码示例。一、Highchart

如何利用Highcharts创建自定义图表如何利用Highcharts创建自定义图表Dec 17, 2023 pm 10:39 PM

如何利用Highcharts创建自定义图表Highcharts是一个功能强大且易于使用的JavaScript图表库,它可以帮助开发人员创建各种类型的交互式和可定制化的图表。为了利用Highcharts创建自定义图表,我们需要掌握一些基本概念和技术。本文将介绍一些重要的步骤,并提供具体的代码示例。步骤一:引入Highcharts库首先,我们需要在HTML文件中

如何在Highcharts中使用地图来展示数据如何在Highcharts中使用地图来展示数据Dec 18, 2023 pm 04:06 PM

如何在Highcharts中使用地图来展示数据引言:在数据可视化领域中,使用地图来展示数据是一种常见且直观的方式。Highcharts是一款强大的JavaScript图表库,提供了丰富的功能和灵活的配置选项。本文将介绍如何在Highcharts中使用地图来展示数据,并提供具体的代码示例。介绍地图数据:在使用地图时,首先需要准备地图数据。High

如何在Highcharts中使用散点图来展示数据如何在Highcharts中使用散点图来展示数据Dec 17, 2023 pm 10:30 PM

如何在Highcharts中使用散点图来展示数据前言Highcharts是一个开源的JavaScript图表库,提供了丰富的图表类型和强大的定制化功能。其中,散点图是一种常用的数据可视化方式,可以展示两个变量之间的关系以及变量的分布情况。本文将介绍如何在Highcharts中使用散点图来展示数据,并提供具体的代码示例。步骤一:引入Highcharts库

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

Repo: How To Revive Teammates
1 months agoBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: How To Get Giant Seeds
1 months agoBy尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Dreamweaver Mac version

Dreamweaver Mac version

Visual web development tools

MantisBT

MantisBT

Mantis is an easy-to-deploy web-based defect tracking tool designed to aid in product defect tracking. It requires PHP, MySQL and a web server. Check out our demo and hosting services.

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

Integrate Eclipse with SAP NetWeaver application server.

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)