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. JAVA中默认的编码方式

    转:http://blog.csdn.net/scyatcs/article/details/31356823 编码问题存在两个方面:JVM之内和JVM之外.1.Java文件编译后形成class这里J ...

  2. Django REST framework反向生成url

    Django REST framework是一个基于Django的框架,REST framework又是怎么反向生成url的呢?? 在前面的例子中,知道在REST framework中有6种版本控制的 ...

  3. Oracle打印日历功能

    Oracle用SQL打印日历 1.1  打印当月日历 , D, NULL)) SUN, , D, NULL)) MON, , D, NULL)) TUE, , D, NULL)) WED, , D,  ...

  4. ES6知识点大汇总

    1 //1.搭建ES6的开发环境: 2 let a=1; 3 console.log(a); 4 //2.var 声明的是全局变量 全局变量会污染外部的区块 5 //let 局部变量 6 //cons ...

  5. HDU [P1281]棋盘游戏

    二分图求最大匹配 我们以每一个格子为边,以行和列为两个集合,那么求二分图的最大匹配数就是最多能放车的数目,那么什么是重要点呢?就是删掉后会影响最大匹配数的匹配边. 我们求出最大匹配数后,枚举匹配边,将 ...

  6. 【自适应辛普森积分】hdu1724 Ellipse

    Ellipse Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Sub ...

  7. SDP（6）：分布式数据库运算环境- Cassandra-Engine

    现代信息系统应该是避不开大数据处理的.作为一个通用的系统集成工具也必须具备大数据存储和读取能力.cassandra是一种分布式的数据库,具备了分布式数据库高可用性(high-availability) ...

  8. 10位时间戳转为C#格式时间

    /// <summary> /// 10位时间戳转为C#格式时间 /// </summary> /// <param name=”timeStamp”></p ...

  9. valgrind安装与使用

    1.得到源代码:http://valgrind.org/->source code 下载最新版的valgrind得到:valgrind-3.2.3.tar.bz2 2.解压安装包:tar -jx ...

  10. Visual Studio Code 调整字体大小

    { "editor.fontSize": 14, "window.zoomLevel": 1, } // 将设置放入此文件中以覆盖默认设置 { , , #代码字 ...