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 相关文章推荐
$.get获取一个文件的内容示例代码
Sep 11 Javascript
JS实现鼠标箭头变成一个燃烧烛光效果的方法
Feb 28 Javascript
javascript中scrollTop详解
Apr 13 Javascript
AngularJS 路由和模板实例及路由地址简化方法(必看)
Jun 24 Javascript
AngularJS入门之动画
Jul 27 Javascript
AngularJS控制器controller给模型数据赋初始值的方法
Jan 04 Javascript
利用js查找数组中指定元素并返回该元素的所有索引示例
Mar 29 Javascript
浅谈在koa2中实现页面渲染的全局数据
Oct 09 Javascript
从vue基础开始创建一个简单的增删改查的实例代码(推荐)
Feb 11 Javascript
react-native滑动吸顶效果的实现过程
Jun 03 Javascript
js+HTML5 canvas 实现简单的加载条(进度条)功能示例
Jul 16 Javascript
Vue实现点击当前行变色
Dec 14 Vue.js
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 远程文件管理,可以给表格排序,遍历目录,时间排序
2009/08/07 PHP
使用PHP会话(Session)实现用户登陆功能
2013/06/29 PHP
实用的简单PHP分页集合包括使用方法
2013/10/21 PHP
js中访问html中iframe的文档对象的代码[IE6,IE7,IE8,FF]
2011/01/08 Javascript
js实现单行文本向上滚动效果实例代码
2013/11/28 Javascript
jquery的attr方法禁用表单元素禁用输入内容
2014/06/23 Javascript
用循环或if语句从json中取数据示例
2014/08/18 Javascript
js实现延时加载Flash的方法
2015/11/26 Javascript
JS中的二叉树遍历详解
2016/03/18 Javascript
深入理解js数组的sort排序
2016/05/28 Javascript
nodejs创建简易web服务器与文件读写的实例
2017/09/07 NodeJs
javascript实现Emrips反质数枚举的示例代码
2017/12/06 Javascript
详解使用jQuery.i18n.properties实现js国际化
2018/05/04 jQuery
Vue 递归多级菜单的实例代码
2019/05/05 Javascript
JavaScript定时器设置、使用与倒计时案例详解
2019/07/08 Javascript
vue2.0项目集成Cesium的实现方法
2019/07/30 Javascript
微信头像地址失效踩坑记附带解决方案
2019/09/23 Javascript
Python实现的括号匹配判断功能示例
2018/08/25 Python
python把转列表为集合的方法
2019/06/28 Python
python 插入日期数据到Oracle实例
2020/03/02 Python
python脚本和网页有何区别
2020/07/02 Python
CSS3中:nth-child和:nth-of-type的区别深入理解
2014/03/10 HTML / CSS
三只松鼠官方旗舰店:全网坚果销售第1
2017/11/25 全球购物
美国基督教约会网站:ChristianCafe.com
2020/02/04 全球购物
公司营业员的工作总结自我评价
2013/10/05 职场文书
求职简历中个人的自我评价
2013/12/25 职场文书
中学生运动会入场词
2014/02/12 职场文书
安全口号大全
2014/06/21 职场文书
党的群众路线整改落实情况汇报
2014/10/28 职场文书
党支部书记岗位职责
2015/02/15 职场文书
入党积极分子培养人意见
2015/06/02 职场文书
2015年秋季运动会前导词
2015/07/20 职场文书
幼儿园安全管理制度
2015/08/05 职场文书
利用Sharding-Jdbc进行分库分表的操作代码
2022/01/22 Java/Android
Vue的列表之渲染,排序,过滤详解
2022/02/24 Vue.js
分析SQL窗口函数之取值窗口函数
2022/04/21 Oracle