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之Servlet监听器Listener

    常用应用场景:单点登录.统计在线人数 一.简介 (一)概述 1.Listener 用于监听 java web程序中的事件,例如创建.修改.删除Session.request.context等,并触发响 ...

  2. C# 实现Html转JSON

    Html为树结构->Json为数组结构 应用场景 H5或浏览器展示Html代码没有问题,但是让原生APP或ReactNative直接展示Html可能会有很多不便 实现方法 可以通过正则表达式捕获 ...

  3. 济南清北学堂游记 Day 7.

    完结撒花? 最后的模拟赛与讲题.大家似乎仍然乐在其中,虽然看评测结果,仍然是满地红. 其实到了最后已经是没有多少可写的了..... 一个精彩的地方是晚上填表的时候,群里炸锅了已经.到处都在刷CCL老师 ...

  4. 汇编之EBP的认识。

    说到EBP就不能忽略了ESP.ESP是一个指针,始终执行堆栈的栈顶.而EBP就是那个所谓的堆栈了. 先看几个例子吧. push ebp ; 把ebp,堆栈的0地址压入堆栈 mov ebp,esp ; ...

  5. 一个Windows下线程池的实现（C++）

    前言 本文配套代码:https://github.com/TTGuoying/ThreadPool 先看看几个概念: 线程:进程中负责执行的执行单元.一个进程中至少有一个线程. 多线程:一个进程中有多 ...

  6. C++函数返回值发生的对象复制

    最近用QT做一个监控系统的项目,需要显示目标的运动轨迹,每次目标移动后,就在目标的轨迹中(用vector记录)添加一条新轨迹. 但是在运行中画面里一直不出现轨迹,经过调试发现是记录轨迹的函数出错了. ...

  7. NSIS 设置系统变量

    定义 ; include for some of the windows messages defines !include "winmessages.nsh" ; HKLM (a ...

  8. Android App 压力测试方法（Monkey）

    一.为什么要开展压力测试 a.提高产品的稳定性:b.提高产品的留存率 二.什么时候开展压力测试 a.首轮功能测试通过后:b.下班后的夜间进行 三.7个基础知识(理论部分) 3.1 手动测试场景与自动测 ...

  9. pinvoke 数据交互笔记

    intptr to array string string[]  _outputStrArray=null;  int channelCount = 0;///返回数组大小            In ...

  10. kvm命令总结和虚机器备份迁移

    管理kvm虚拟机命令 virsh uri:                                          查看当前主机上hypervisor的连接路径: virsh connect ...