HighCharts绘制2D圆环图效果实例分享-js教程-PHP中文网

首页

web前端

js教程

HighCharts绘制2D圆环图效果实例分享

小云云

Jan 23, 2018 am 09:02 AM

highcharts 实例

本文主要介绍了jQuery插件HighCharts绘制2D圆环图效果,结合实例形式分析了jQuery使用HighCharts插件绘制圆环图的实现步骤与相关操作技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下，希望能帮助到大家。

本文实例讲述了jQuery插件HighCharts绘制2D圆环图效果。分享给大家供大家参考，具体如下：

1、实例代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HighCharts 2D圆环图</title>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/highcharts.js"></script>
<script type="text/javascript">
  $(function(){
   var colors = Highcharts.getOptions().colors,
   categories = [&#39;花&#39;, &#39;树&#39;, &#39;鱼&#39;, &#39;鸟&#39;, &#39;鲸&#39;],
   name = &#39;Browser brands&#39;,
   data = [{
     y: 55.11,
     color: colors[0],
     drilldown: {
      name: &#39;花的种类&#39;,
      categories: [&#39;梅花&#39;, &#39;桃花&#39;, &#39;梨花&#39;, &#39;樱花&#39;],
      data: [13.6, 7.35, 33.06, 2.81],
      color: colors[0]
     }
    }, {
     y: 21.63,
     color: colors[1],
     drilldown: {
      name: &#39;树的种类&#39;,
      categories: [&#39;樟树&#39;, &#39;桉树&#39;, &#39;茶树&#39;, &#39;桃树&#39;, &#39;梨树&#39;],
      data: [15.20, 3.83, 18.58, 13.12, 45.43],
      color: colors[1]
     }
    }, {
     y: 11.94,
     color: colors[2],
     drilldown: {
      name: &#39;鱼的种类&#39;,
      categories: [&#39;鲫鱼&#39;, &#39;鲢鱼&#39;, &#39;草鱼&#39;, &#39;青鱼&#39;, &#39;鲦鱼&#39;,&#39;鳙鱼&#39;, &#39;鲥鱼&#39;],
      data: [41.12, 10.19, 11.12, 14.36, 21.32, 9.91, 17.50],
      color: colors[2]
     }
    }, {
     y: 7.15,
     color: colors[3],
     drilldown: {
      name: &#39;鸟的种类&#39;,
      categories: [&#39;松鸡&#39;, &#39;卷尾&#39;, &#39;鹪鹩&#39;, &#39;岩鹨&#39;, &#39;山鹑&#39;,&#39;画眉&#39;, &#39;金鸡&#39;],
      data: [14.55, 19.42, 16.23, 16.21, 18.20, 23.19, 10.14],
      color: colors[3]
     }
    }, {
     y: 2.14,
     color: colors[4],
     drilldown: {
      name: &#39;鲸的种类&#39;,
      categories: [&#39;须鲸&#39;, &#39;蓝鲸&#39;, &#39;虎鲸&#39;],
      data: [ 24.12, 18.37, 32.65],
      color: colors[4]
     }
    }];
  // 构建物种数据
  var speciesData = [];
  var speData = [];
  for (var i = 0; i < data.length; i++) {
   // 添加物种数据
   speciesData.push({
    name: categories[i],
    y: data[i].y,
    color: data[i].color
   });
   for (var j = 0; j < data[i].drilldown.data.length; j++) {
    var brightness = 0.4 - (j / data[i].drilldown.data.length) / 5 ;
    speData.push({
     name: data[i].drilldown.categories[j],
     y: data[i].drilldown.data[j],
     color: Highcharts.Color(data[i].color).brighten(brightness).get()
    });
   }
  }
  // 创建圆环图
  $(&#39;#donutChart&#39;).highcharts({
   chart: {
    type: &#39;pie&#39;
   },
   title: {
    text: &#39;物种数量及其比例&#39;
   },
   yAxis: {
    title: {
     text: &#39;比例&#39;
    }
   },
   plotOptions: {
    pie: {
     shadow: true,
     center: [&#39;50%&#39;, &#39;50%&#39;]
    }
   },
   tooltip: {
   valueSuffix: &#39;%&#39;
   },
   series: [{
    name: &#39;物种&#39;,
    data: speciesData,
    size: &#39;70%&#39;,
    dataLabels: {
     formatter: function() {
      return this.y > 5 ? this.point.name : null;
     },
     color: &#39;white&#39;,
     distance: -30
    }
   }, {
    name: &#39;数量&#39;,
    data: speData,
    size: &#39;80%&#39;,
    innerSize: &#39;80%&#39;,
    dataLabels: {
     formatter: function() {
      return this.y > 1 ? &#39;<b>&#39;+ this.point.name +&#39;:</b> &#39;+ this.y +&#39;%&#39; : null;
     }
    }
   }]
  });
  });
</script>
</head>
<body>
 <p id="donutChart" style="width: 1250px; height: 550px; margin: 0 auto"></p>
</body>
</html>

登录后复制

2、运行效果图：

热AI工具

Undresser.AI Undress

人工智能驱动的应用程序，用于创建逼真的裸体照片

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

免费脱衣服图片

Clothoff.io

AI脱衣机

AI Hentai Generator

免费生成ai无尽的。

显示更多

热工具

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

中文版，非常好用

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

显示更多

热门话题

gmail邮箱登陆入口在哪里

7564

CakePHP 教程

1386

steam的账户名称是什么格式

win11激活密钥永久

NYT连接提示和答案

显示更多

Related knowledge

Python中的SVM实例 Jun 11, 2023 pm 08:42 PM

Python中的支持向量机（SupportVectorMachine，SVM）是一个强大的有监督学习算法，可以用来解决分类和回归问题。SVM在处理高维度数据和非线性问题的时候表现出色，被广泛地应用于数据挖掘、图像分类、文本分类、生物信息学等领域。在本文中，我们将介绍在Python中使用SVM进行分类的实例。我们将使用scikit-learn库中的SVM模

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

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

如何在Highcharts中使用动态数据来展示实时数据 Dec 17, 2023 pm 06:57 PM

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

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

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

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

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

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

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

VUE3入门实例：制作一个简单的视频播放器 Jun 15, 2023 pm 09:42 PM

随着新一代前端框架的不断涌现，VUE3作为一个快速、灵活、易上手的前端框架备受热爱。接下来，我们就来一起学习VUE3的基础知识，制作一个简单的视频播放器。一、安装VUE3首先，我们需要在本地安装VUE3。打开命令行工具，执行以下命令:npminstallvue@next接着，新建一个HTML文件，引入VUE3：<!doctypehtml>

学习Golang指针转换的最佳实践示例 Feb 24, 2024 pm 03:51 PM

Golang是一门功能强大且高效的编程语言，可以用于开发各种应用程序和服务。在Golang中，指针是一种非常重要的概念，它可以帮助我们更灵活和高效地操作数据。指针转换是指在不同类型之间进行指针操作的过程，本文将通过具体的实例来学习Golang中指针转换的最佳实践。1.基本概念在Golang中，每个变量都有一个地址，地址就是变量在内存中的位置。

See all articles

HighCharts绘制2D圆环图效果实例分享

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题