当前位置： 移动技术网 > IT编程>开发语言>JavaScript > jQuery插件HighCharts绘制2D圆环图效果示例【附demo源码下载】

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

2019年06月11日  | 移动技术网IT编程  | 我要评论

本文实例讲述了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程序设计有所帮助。

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网