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(){
   $('#halfDonutChart').highcharts({
    chart: {
     plotBackgroundColor: '#878788',
     plotBorderWidth: '50px',
     plotShadow: true
    },
    title: {
     text: '2014年3月第一周人数分布情况',
     align: 'center',
     verticalAlign: 'middle',
     y: 100
    },
    tooltip: {
     pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
    },
    plotOptions: {
     pie: {
      dataLabels: {
       enabled: true,
       distance: -80,
       style: {
        fontWeight: 'bold',
        fontSize: '16px',
        color: 'white',
        textShadow: '0px 1px 2px black'
       }
      },
      startAngle: -90,
      endAngle: 90,
      center: ['50%', '75%']
     }
    },
    series: [{
     type: 'pie',
     name: '人数比例',
     innerSize: '50%',
     data: [
      ['星期一', 878454],
      ['星期二', 542155],
      ['星期三', 415542],
      ['星期四', 651212],
      ['星期五', 874545],
      ['星期六', 326566],
      ['星期日', 984545]
     ]
    }]
   });
  });
</script>
</head>
<body>
 <div id="halfDonutChart" style="width: 1250px; height: 550px; margin: 0 auto"></div>
</body>
</html>

2、运行效果图:

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

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

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

Javascript 相关文章推荐
javascript作用域和闭包使用详解
Apr 25 Javascript
js选项卡的实现方法
Feb 09 Javascript
jquery带翻页动画的电子杂志代码分享
Aug 21 Javascript
快速学习JavaScript的6个思维技巧
Oct 13 Javascript
JavaScript数据类型转换的注意事项
Jul 31 Javascript
Bootstrap3 多个模态对话框无法显示的解决方案
Feb 23 Javascript
详解Angular中的自定义服务Service、Provider以及Factory
Apr 22 Javascript
jquery实现一个全局计时器(商城可用)
Jun 30 jQuery
vue 实现类似淘宝星级评分的示例
Mar 01 Javascript
基于vue2.0动态组件及render详解
Mar 17 Javascript
详解Vue CLI3 多页应用实践和源码设计
Aug 30 Javascript
JS数组求和的常用方法总结【5种方法】
Jan 14 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
react性能优化达到最大化的方法 immutable.js使用的必要性
Mar 09 #Javascript
微信小程序遇到修改数据后页面不渲染的问题解决
Mar 09 #Javascript
You might like
一个简单的php加密解密函数(动态加密)
2013/06/19 PHP
php实现的双向队列类实例
2014/09/24 PHP
php、java、android、ios通用的3des方法(推荐)
2016/09/09 PHP
PHP 应用容器化以及部署方法
2018/02/12 PHP
JavaScript 拖拉缩放效果
2008/12/10 Javascript
JavaScript闭包函数访问外部变量的方法
2014/08/27 Javascript
JQuery.get提交页面不跳转的解决方法
2015/01/13 Javascript
jQuery插件StickUp实现网页导航置顶
2015/04/12 Javascript
快速学习jQuery插件 jquery.validate.js表单验证插件使用方法
2015/12/01 Javascript
基于JavaScript实现表单密码的隐藏和显示出来
2016/03/02 Javascript
基于jQuery实现点击列表加载更多效果
2016/05/31 Javascript
jQuery文本框得到与失去焦点动态改变样式效果
2016/09/08 Javascript
JavaScript for循环 if判断语句(学习笔记)
2017/10/11 Javascript
Vue绑定内联样式问题
2018/10/17 Javascript
Angular8路由守卫原理和使用方法
2019/08/29 Javascript
JS图片懒加载的优点及实现原理
2020/01/10 Javascript
在vue中给后台接口传的值为数组的格式代码
2020/11/12 Javascript
[55:35]VGJ.S vs Mski Supermajor小组赛C组 BO3 第二场 6.3
2018/06/04 DOTA
[01:13:46]iG vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python学习基础之循环import及import过程
2018/04/22 Python
python模拟表单提交登录图书馆
2018/04/27 Python
Python实现的读取/更改/写入xml文件操作示例
2018/08/30 Python
django之跨表查询及添加记录的示例代码
2018/10/16 Python
使用Python实现微信提醒备忘录功能
2018/12/04 Python
Python构建图像分类识别器的方法
2019/01/12 Python
基于Python的PIL库学习详解
2019/05/10 Python
Python socket连接中的粘包、精确传输问题实例分析
2020/03/24 Python
Java如何基于wsimport调用wcf接口
2020/06/17 Python
Python文件夹批处理操作代码实例
2020/07/21 Python
CSS3 实现弹跳的小球动画
2020/10/26 HTML / CSS
学生实习介绍信
2014/01/15 职场文书
关于环保的活动方案
2014/08/25 职场文书
2014年教师个人工作总结
2014/11/10 职场文书
清洁工个人总结
2015/03/04 职场文书
2015年预备党员自我评价
2015/03/04 职场文书
导游词之沈阳植物园
2019/11/30 职场文书