jQuery插件HighCharts绘制2D圆环图效果示例【附demo源码下载】

本文实例讲述了jQuery插件HighCharts绘制2D圆环图效果。分享给大家供大家参考，具体如下：

1、实例代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HighCharts 2D圆环图</title>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="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、运行效果图：

附：完整实例代码点击此处本站下载。

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery常用插件及用法总结》、《jquery中Ajax用法总结》、《jQuery表格(table)操作技巧汇总》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

# jQuery # 插件 # HighCharts # 2D # 圆环图 # jQuery插件FusionCharts实现的2D面积图效果示例【附demo源码下载】 # jQuery插件FusionCharts实现的2D柱状图效果示例【附demo源码下载】 # jQuery插件FusionCharts实现的3D柱状图效果实例【附demo源码下载】 # jQuery插件FusionCharts实现的2D饼状图效果【附demo源码下载】 # jQuery插件FusionCharts绘制的3D饼状图效果实例【附demo源码下载】 # jQuery插件HighCharts绘制2D半圆环图效果示例【附demo源码下载】 # jQuery插件HighCharts绘制2D金字塔图效果示例【附demo源码下载】 # jQuery插件HighCharts绘制2D柱状图、折线图和饼图的组合图效果示例【附demo源码下载 # jQuery插件HighCharts绘制2D柱状图、折线图的组合双轴图效果示例【附demo源码下载】 # jQuery插件HighCharts实现2D柱状图、折线图的组合多轴图效果示例【附demo源码下载】 # 12款经典的白富美型—jquery图片轮播插件—前端开发必备 # 强烈推荐240多个jQuery插件提供下载 # jQuery插件FusionCharts绘制ScrollColumn2D图效果示例【附demo源码下 # 相关内容 # 感兴趣 # 给大家 # 点击此处 # 更多关于 # 所述 # 程序设计 # 操作技巧 # 选择器 # 讲述了 # 虎鲸 # drilldown # Browser # categories # getOptions # brands # color # data # 鳙鱼 # 鲦鱼

返回目录在线咨询

上一篇：网络营销文化传媒计划方案,传媒营销目的？
下一篇：使用自助建站系统时怎样确保网站的安全性和隐私保护？

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

全网整合营销服务商

jQuery插件HighCharts绘制2D圆环图效果示例【附demo源码下载】

您的项目需求