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


Posted in Javascript onMarch 09, 2017

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

Javascript 相关文章推荐
js 数值项目的格式化函数代码
May 14 Javascript
JavaScript.Encode手动解码技巧
Jul 14 Javascript
原来Jquery.load的方法可以一直load下去
Mar 28 Javascript
JavaScript的原型继承详解
Feb 15 Javascript
JS实现生成会变大变小的圆环实例
Aug 05 Javascript
AngularJS入门心得之directive和controller通信过程
Jan 25 Javascript
利用jquery制作滚动到指定位置触发动画
Mar 26 Javascript
完美解决IE9浏览器出现的对象未定义问题
Sep 29 Javascript
本地存储localStorage用法详解
Jul 31 Javascript
微信小程序之数据绑定原理解析
Aug 14 Javascript
js实现的订阅发布者模式简单示例
Mar 14 Javascript
如何使用gpu.js改善JavaScript的性能
Dec 01 Javascript
js实现显示手机号码效果
Mar 09 #Javascript
jQuery插件HighCharts绘制2D半圆环图效果示例【附demo源码下载】
Mar 09 #Javascript
javascript 秒表计时器实现代码
Mar 09 #Javascript
react实现pure render时bind(this)隐患需注意!
Mar 09 #Javascript
使用bootstrap-paginator.js 分页来进行ajax 异步分页请求示例
Mar 09 #Javascript
jQuery插件HighCharts绘制2D金字塔图效果示例【附demo源码下载】
Mar 09 #Javascript
微信小程序 合法域名校验出错详解及解决办法
Mar 09 #Javascript
You might like
PHP的FTP学习(四)
2006/10/09 PHP
简单的用PHP编写的导航条程序
2006/10/09 PHP
php动态变量定义及使用
2015/06/10 PHP
PHP面向对象学习之parent::关键字
2017/01/18 PHP
php中文乱码问题的终极解决方案汇总
2017/08/01 PHP
PHP 多任务秒级定时器的实现方法
2018/05/13 PHP
window.open的功能全解析
2006/10/10 Javascript
Jquery AJAX 框架的使用方法
2009/11/03 Javascript
基于jQuery的前端数据通用验证库
2011/08/08 Javascript
JS Jquery 遍历,筛选页面元素 自动完成(实现代码)
2013/07/08 Javascript
jquery的each方法使用示例分享
2014/03/25 Javascript
html+js实现简单的计算器代码(加减乘除)
2016/07/12 Javascript
js实现简单的获取验证码按钮效果
2017/03/03 Javascript
Web制作验证码功能实例代码
2017/06/19 Javascript
Vue 开发音乐播放器之歌手页右侧快速入口功能
2018/08/08 Javascript
javascript this指向相关问题及改变方法
2020/11/19 Javascript
JS hasOwnProperty()方法检测一个属性是否是对象的自有属性的方法
2021/01/29 Javascript
python实现web方式logview的方法
2015/08/10 Python
Python编程实现微信企业号文本消息推送功能示例
2017/08/21 Python
Python模糊查询本地文件夹去除文件后缀的实例(7行代码)
2017/11/09 Python
详谈Python中列表list,元祖tuple和numpy中的array区别
2018/04/18 Python
解决python2 绘图title,xlabel,ylabel出现中文乱码的问题
2019/01/29 Python
情人节快乐! python绘制漂亮玫瑰
2020/08/18 Python
python 实现return返回多个值
2019/11/19 Python
CSS3系列之3D制作方法案例
2017/08/14 HTML / CSS
html5中valid、invalid、required的定义
2014/02/21 HTML / CSS
英国高档百货连锁店:John Lewis
2017/11/20 全球购物
DNA测试:Orig3n
2019/03/01 全球购物
Linux不知道文件后缀名怎么判断文件类型
2012/04/26 面试题
请写出一段Python代码实现删除一个list里面的重复元素
2015/12/29 面试题
国际会议邀请函范文
2014/01/16 职场文书
护理毕业生自我鉴定
2014/02/11 职场文书
生日宴会主持词
2014/03/20 职场文书
经典演讲稿汇总
2014/05/19 职场文书
幼儿园见习总结
2015/06/23 职场文书
浅谈如何提高PHP代码质量之端到端集成测试
2021/05/28 PHP