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 相关文章推荐
jQuery 全选效果实现代码
Mar 23 Javascript
编写高效jQuery代码的4个原则和5个技巧
Apr 24 Javascript
jQuery中:eq()选择器用法实例
Dec 29 Javascript
jQuery匹配文档链接并添加class的方法
Jun 26 Javascript
JS实现DIV高度自适应窗口示例
Feb 16 Javascript
详解vue-router 2.0 常用基础知识点之router-link
May 10 Javascript
VS Code转换大小写、修改选中文字或代码颜色的方法
Dec 15 Javascript
vue项目上传Github预览的实现示例
Nov 06 Javascript
vue-router beforeEach跳转路由验证用户登录状态
Dec 26 Javascript
vue3 源码解读之 time slicing的使用方法
Oct 31 Javascript
浅析微信小程序自定义日历组件及flex布局最后一行对齐问题
Oct 29 Javascript
antd日期选择器禁止选择当天之前的时间操作
Oct 29 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设计模式之访问者模式
2016/09/23 PHP
PHP使用finfo_file()函数检测上传图片类型的实现方法
2017/04/18 PHP
PHP关于foreach复制知识点总结
2019/01/28 PHP
JavaScript聚焦于第一个字段的代码
2010/10/15 Javascript
js自动闭合html标签(自动补全html标记)
2012/10/04 Javascript
jQuery登陆判断简单实现代码
2013/04/21 Javascript
js中的屏蔽的使用示例
2013/07/30 Javascript
一个JS的日期格式化算法示例
2013/07/31 Javascript
如何实现textarea里的不同文本显示不同颜色
2014/01/20 Javascript
JavaScript 学习笔记之操作符(续)
2015/01/14 Javascript
JavaScript中用getDate()方法返回指定日期的教程
2015/06/09 Javascript
JavaScript中SetInterval与setTimeout的用法详解
2015/11/10 Javascript
jQuery+ajax简单实现文件上传的方法
2016/06/03 Javascript
VueJS全面解析
2016/11/10 Javascript
Bootstrap基本组件学习笔记之列表组(11)
2016/12/07 Javascript
JavaScript中的一些隐式转换和总结(推荐)
2017/12/22 Javascript
微信jssdk踩坑之签名错误invalid signature
2020/05/19 Javascript
谈谈JavaScript中的函数
2020/09/08 Javascript
详解javascript脚本何时会被执行
2021/02/05 Javascript
Django应用程序中如何发送电子邮件详解
2017/02/04 Python
详解python中requirements.txt的一切
2017/03/03 Python
Python判断变量是否为Json格式的字符串示例
2017/05/03 Python
Python使用Selenium模块模拟浏览器抓取斗鱼直播间信息示例
2018/07/18 Python
详解使用PyInstaller将Pygame库编写的小游戏程序打包为exe文件
2019/08/23 Python
利用纯CSS3实现动态的自行车特效源码
2017/01/20 HTML / CSS
美国一家著名的手表在线折扣网站:Discount Watch Store
2020/02/24 全球购物
材料加工硕士生求职信
2013/10/10 职场文书
员工年终演讲稿
2014/01/03 职场文书
《在大海中永生》教学反思
2014/02/24 职场文书
幼儿园植树节活动总结
2014/07/04 职场文书
2014年党员学习“三严三实”思想汇报
2014/09/15 职场文书
2014年重阳节老干部座谈会上的讲话稿
2014/09/25 职场文书
结婚保证书(三从四德)
2015/02/26 职场文书
2015社区爱国卫生工作总结
2015/04/21 职场文书
党员干部廉洁自律承诺书
2015/04/28 职场文书
2019年怎样才能撰写出优秀的自荐信
2019/03/25 职场文书