欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

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

程序员文章站 2022-05-12 19:57:38
本文实例讲述了jquery插件highcharts绘制2d圆环图效果。分享给大家供大家参考，具体如下： 1、实例代码：

本文实例讲述了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插件HighCharts绘制2D圆环图效果示例【附demo源码下载】

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

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

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

上一篇： vue + element + 初始化项目

下一篇： WIN10下如何快速禁止驱动系统强制签名

推荐阅读