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. 自己做的notepad++ FTP同步插件

    平时修改FTP上的文件的时候,想先备份一下,没有合适的方法,尝试做了一个小插件. 差点忘了,下载地址   https://pan.baidu.com/s/1htdtT9E 下面是   具体的说明 Fa ...

  2. JVM类加载机制---类加载器

    一.概念 "通过一个类的全限定名来获取描述此类的二进制字节流",实现这个动作的代码模块成为 类加载器. 二.分类 从java开发人员的角度出发,系统提供的类加载器大致分为如下3类: ...

  3. Cypher查询语言--Neo4j 综合(四)

    目录 返回节点 返回关系 返回属性 带特殊字符的标识符 列的别名 可选属性 特别的结果   查询中的返回部分,返回途中定义的感兴趣的部分.可以为节点.关系或其上的属性. 图 返回节点 返回一个节点,在 ...

  4. 第一个 HTML5Plus 移动应用

    什么是 HTML5Plus 移动应用 HTML5 Plus移动App,简称5+App,是一种基于HTML.JS.CSS编写的运行于手机端的App,这种App可以通过扩展的JS API任意调用手机的原生 ...

  5. 主备（keepalived+haproxy)

    系统:centos6.9 mini 主机名    ip                                虚拟ip kh1     192.168.126.210 kh2     192. ...

  6. 洛谷 [P1963] [NOI2009] 变换序列

    这是一道二分图匹配的题 先%dalao博客 建图并没有什么难的,但是关键在于如何使字典序最小. 一个很显然的想法是先求出一个完美匹配,然后从x集合的第一个元素开始,如果该元素匹配的较小的一个,那么继续 ...

  7. Alex: 2018年对混合现实MR的展望

    原文作者:Alex Kipman, 微软操作系统工程院技术院士 Hello 大家好! 难以置信我们已经走过了2018年的头两个月了. 每年一月份我都会去巴西省亲,和我的家人欢聚一堂,度过一个美好的假日 ...

  8. ManagementObjectSearcher Path

    为了获取硬件信息,你还需要创建一个ManagementObjectSearcher 对象.ManagementObjectSearcher searcher = new ManagementObjec ...

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

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

  10. table内容强制换行

    为防止文字过长而撑坏表格,一般我们需要通过css使td中内容强制换行.分别给table和td加一条样式即可实现: <meta charset="utf-8"> < ...