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 相关文章推荐
js 函数的执行环境和作用域链的深入解析
Nov 01 Javascript
Firefox中使用outerHTML的2种解决方法
Jun 07 Javascript
node.js集成百度UE编辑器
Feb 05 Javascript
JavaScript实现为指定对象添加多个事件处理程序的方法
Apr 17 Javascript
javascript验证邮件地址和MX记录的方法
Jun 16 Javascript
JavaScript中的定时器之Item23的合理使用
Oct 30 Javascript
AngularJS 自定义过滤器详解及实例代码
Sep 14 Javascript
通过jquery实现页面的动画效果(实例代码)
Sep 18 Javascript
Angular.JS去掉访问路径URL中的#号详解
Mar 30 Javascript
Angularjs渲染的 using 指令的星级评分系统示例
Nov 09 Javascript
layui表格checkbox选择全选样式及功能的实例
Mar 07 Javascript
详解Vue后台管理系统开发日常总结(组件PageHeader)
Nov 01 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
zf框架的registry(注册表)使用示例
2014/03/13 PHP
php PDO实现的事务回滚示例
2017/03/23 PHP
lnmp安装多版本PHP共存的方法详解
2018/08/02 PHP
为jQuery.Treeview添加右键菜单的实现代码
2010/10/22 Javascript
jquery 实现二级/三级/多级联动菜单的思路及代码
2013/04/08 Javascript
javascript学习笔记(四)function函数部分
2014/09/30 Javascript
chrome不支持form.submit的解决方案
2015/04/28 Javascript
浅析jQuery Mobile的初始化事件
2015/12/03 Javascript
JavaScript实现页面定时刷新(定时器,meta)
2016/10/12 Javascript
js中事件对象和事件委托的介绍
2019/01/21 Javascript
jquery多级树形下拉菜单的实例代码
2019/07/09 jQuery
关于JS模块化的知识点分享
2019/10/16 Javascript
python网络编程之UDP通信实例(含服务器端、客户端、UDP广播例子)
2014/04/25 Python
Python中用Decorator来简化元编程的教程
2015/04/13 Python
使用python实现个性化词云的方法
2017/06/16 Python
Python Requests模拟登录实现图书馆座位自动预约
2018/04/27 Python
Jupyter notebook远程访问服务器的方法
2018/05/24 Python
tensorflow 恢复指定层与不同层指定不同学习率的方法
2018/07/26 Python
解决pycharm安装后代码区不能编辑的问题
2018/10/28 Python
Pycharm之快速定位到某行快捷键的方法
2019/01/20 Python
python实现QQ空间自动点赞功能
2019/04/09 Python
将python文件打包成EXE应用程序的方法
2019/05/22 Python
opencv3/C++图像像素操作详解
2019/12/10 Python
win10系统下python3安装及pip换源和使用教程
2020/01/06 Python
Python实现链表反转的方法分析【迭代法与递归法】
2020/02/22 Python
Python实现列表中非负数保留,负数转化为指定的数值方式
2020/06/04 Python
韩国女装NO.1网店:STYLENANDA
2016/09/16 全球购物
捷克购买家具网站:JENA nábytek
2020/03/19 全球购物
汇科协同Java笔试题
2012/03/31 面试题
生产内勤岗位职责
2013/12/07 职场文书
小学生期末评语
2014/04/21 职场文书
保护地球的标语
2014/06/17 职场文书
党员发展大会主持词
2015/07/03 职场文书
2015初一年级组工作总结
2015/07/24 职场文书
2016继续教育培训学习心得体会
2016/01/19 职场文书
Python语言内置数据类型
2022/02/24 Python