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. [DeeplearningAI笔记]改善深层神经网络_优化算法2.1_2.2_mini-batch梯度下降法

    觉得有用的话,欢迎一起讨论相互学习~Follow Me 2.1 mini-batch gradient descent mini-batch梯度下降法 我们将训练数据组合到一个大的矩阵中 \(X=\b ...

  2. python中的字符串格式化

    Python中常见的字符串格式化方式包括两种:字符串插入(str%),format函数(str.format()) 1.字符串插入 字符串插入是设置字符串格式的简单方法,与C语言.Fortran语言差 ...

  3. BZOJ 2463: [中山市选2009]谁能赢呢？[智慧]

    明和小红经常玩一个博弈游戏.给定一个n×n的棋盘,一个石头被放在棋盘的左上角.他们轮流移动石头.每一回合,选手只能把石头向上,下,左,右四个方向移动一格,并且要求移动到的格子之前不能被访问过.谁不能移 ...

  4. 【模板小程序】求M~N范围内的质数个数

    /* 本程序说明: [编程题] 求素数 时间限制:2秒 空间限制:32768K 输入M.N,1 < M < N < 1000000,求区间[M,N]内的所有素数的个数.素数定义:除了 ...

  5. 游戏2048源代码 - C语言控制台界面版

    一.游戏介绍 <2048>是最近比较流行的一款数字游戏.原版2048首先在github上发布,原作者是Gabriele Cirulli.它是基于<1024>和<小3传奇& ...

  6. js小技巧：数组去重

    JavaScript 数组中去除重复的数据 var arr = [1, 2, 2, 3, '1', null, 'a', 'b', 'a']; var t = {}; var result = arr ...

  7. 企业级docker仓库Harbor部署

    1.安装环境下载离线安装包地址https://github.com/vmware/harbor/releases/yum install -y dockerpip install -i https:/ ...

  8. Java多线程应用总结

    一.基本方法 进程和线程一样,都是实现并发的一个基本单位.线程是比进程更小的执行单位,线程是在进程的基础上进行的进一步划分.所谓多线程,是指一个进程在执行过程中可以产生多个更小的程序单元,这些更小的单 ...

  9. 洛谷P4014 分配问题【最小/大费用流】题解+AC代码

    洛谷P4014 分配问题[最小/大费用流]题解+AC代码 题目描述 有 n 件工作要分配给 n 个人做.第 i 个人做第 j 件工作产生的效益为c ij. 试设计一个将 n 件工作分配给 n 个人做的 ...

  10. 记录一则fsck的简单案例

    环境:RHEL 6.5 + ext4文件系统 我个人实验环境的一个虚拟机,开机时在Checking filesystems时,有报错: /dev/mapper/vg_linuxbase-lv_root ...