HighCharts之2D圆环图

1、实例源码

Donut.html：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HighCharts 2D圆环图</title>
<script type="text/javascript" src="../scripts/jquery-1.11.0.js"></script>
<script type="text/javascript" src="../scripts/js/highcharts.js"></script>
<script type="text/javascript">
     $(function(){
    	 var colors = Highcharts.getOptions().colors,
         categories = ['花', '树', '鱼', '鸟', '鲸'],
         name = 'Browser brands',
         data = [{
                 y: 55.11,
                 color: colors[0],
                 drilldown: {
                     name: '花的种类',
                     categories: ['梅花', '桃花', '梨花', '樱花'],
                     data: [13.6, 7.35, 33.06, 2.81],
                     color: colors[0]
                 }
             }, {
                 y: 21.63,
                 color: colors[1],
                 drilldown: {
                     name: '树的种类',
                     categories: ['樟树', '桉树', '茶树', '桃树', '梨树'],
                     data: [15.20, 3.83, 18.58, 13.12, 45.43],
                     color: colors[1]
                 }
             }, {
                 y: 11.94,
                 color: colors[2],
                 drilldown: {
                     name: '鱼的种类',
                     categories: ['鲫鱼', '鲢鱼', '草鱼', '青鱼', '鲦鱼','鳙鱼', '鲥鱼'],
                     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: '鸟的种类',
                     categories: ['松鸡', '卷尾', '鹪鹩', '岩鹨', '山鹑','画眉', '金鸡'],
                     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: '鲸的种类',
                     categories: ['须鲸', '蓝鲸', '虎鲸'],
                     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()
             });
         }
     }

     // 创建圆环图
     $('#donutChart').highcharts({
         chart: {
             type: 'pie'
         },
         title: {
             text: '物种数量及其比例'
         },
         yAxis: {
             title: {
                 text: '比例'
             }
         },
         plotOptions: {
             pie: {
                 shadow: true,
                 center: ['50%', '50%']
             }
         },
         tooltip: {
     	    valueSuffix: '%'
         },
         series: [{
             name: '物种',
             data: speciesData,
             size: '70%',
             dataLabels: {
                 formatter: function() {
                     return this.y > 5 ? this.point.name : null;
                 },
                 color: 'white',
                 distance: -30
             }
         }, {
             name: '数量',
             data: speData,
             size: '80%',
             innerSize: '80%',
             dataLabels: {
                 formatter: function() {
                     return this.y > 1 ? '<b>'+ this.point.name +':</b> '+ this.y +'%'  : null;
                 }
             }
         }]
     });
     });
</script>
</head>
<body>
   <div id="donutChart" style="width: 1250px; height: 550px; margin: 0 auto"></div>
</body>
</html>

2、实例结果

HighCharts之2D圆环图的更多相关文章

  1. HighCharts之2D面积图

    HighCharts之2D面积图  1.HighCharts之2D面积图源码 <!DOCTYPE html> <html> <head> <meta char ...

  2. HighCharts之2D折线图

    HighCharts之2D折线图 1.HighCharts之2D折线图源码 line.html: <!DOCTYPE html> <html> <head> < ...

  3. HighCharts之2D金字塔图

    HighCharts之2D金字塔图 1.实例源码 Pyramid.html: <!DOCTYPE html> <html> <head> <meta char ...

  4. HighCharts之2D半圆环图

    HighCharts之2D半圆环图 1.实例源码 HalfDonut.html: <!DOCTYPE html> <html> <head> <meta ch ...

  5. HighCharts之2D数值带有百分数的面积图

    HighCharts之2D数值带有百分数的面积图 1.HighCharts之2D数值带有百分数的面积图源码 AreaPercentage.html: <!DOCTYPE html> < ...

  6. HighCharts之2D堆面积图

    HighCharts之2D堆面积图 1.HighCharts之2D堆面积图源码 StackedArea.html: <!DOCTYPE html> <html> <hea ...

  7. HighCharts之2D含有负值的面积图

    HighCharts之2D含有负值的面积图 1.HighCharts之2D含有负值的面积图源码 AreaNegative.html: <!DOCTYPE html> <html> ...

  8. HighCharts之2D带Label的折线图

    HighCharts之2D带Label的折线图 1.HighCharts之2D带Label的折线图源码 LineLabel.html: <!DOCTYPE html> <html&g ...

  9. HighCharts之2D堆条状图

    HighCharts之2D堆条状图 1.HighCharts之2D堆条状图源码 StackedBar.html: <!DOCTYPE html> <html> <head ...

随机推荐

  1. linux修改TCP最大连接数

    环境 操作系统: oracle-linux7.3 修改系统支持的最大TCP连接 最大tcp连接数和系统允许打开的最大文件数,用户允许打开的最大文件数,TCP网络连接可用的端口范围有关,取上述的最小值: ...

  2. C程序结构

    从程序流程的角度来看,C语言中的语句可以分为3种基本结构:顺序结构.分支结构和循环结构. ① 顺序结构的执行过程如图5-1所示.在这种结构中,程序会顺序执行各条语句. ② 分支结构的执行过程如图5-2 ...

  3. JAVA常用知识点及面试题总结

    1. String.StringBuffer.StringBuilder三者区别? (1)三者在执行速率上的比较: String<StringBuffer<StringBuilder 原因 ...

  4. SAS SATA SSD基本介绍

    SATA硬盘采用新的设计结构,数据传输快,节省空间,相对于IDE硬盘具有很多优势: 1 .SATA硬盘比IDE硬盘传输速度高.目前SATA可以提供150MB/s的高峰传输速率.今后将达到300 MB/ ...

  5. bzoj 4822: [Cqoi2017]老C的任务

    4822: [Cqoi2017]老C的任务 练手速... #include <iostream> #include <cstdio> #include <cstring& ...

  6. VUE2.0 elemenui-ui 2.0.X 封装 省市区三级

    1. 效果图 2. 版本依赖  vue 2.X , elementui  2.0.11  使用element ui  <el-form>标签 3. 源码  components/CityL ...

  7. python进行各类API的使用

    前言: 献上歌曲一首: 因为快要上学了,昨天晚上熬夜.然后今天早上起床 没有什么精神.吃完午饭后开始思考今天写什么好呢 然后逛着逛着逛到了一个API网站.感觉还不错就爬了 0x01: 环境:windo ...

  8. ionic2+Angular 使用HttpInterceptorService拦截器 统一处理数据请求

    sstep1:新建http-Interceptor.ts文件 import { Injectable } from '@angular/core'; import { HttpInterceptorS ...

  9. setfacl命令 来自: http://man.linuxde.net/setfacl

    常用选项##### <pre>-b,--remove-all:删除所有扩展的acl规则,基本的acl规则(所有者,群组,其他)将被保留. -k,--remove-default:删除缺省的 ...

  10. Rsync（远程同步）： linux中Rsync命令的实际示例

    rsync的 ( 远程同步 )为在Linux / Unix系统局部 拷贝和同步文件和目录远程以及一个最常用的命令. 随着rsync命令的帮助,您可以复制并在目录中远程和本地同步数据,在磁盘和网络,进行 ...