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函数
Oct 16 Javascript
JQuery实现绚丽的横向下拉菜单
Dec 19 Javascript
escape编码与unescape解码汉字出现乱码的解决方法
Jul 02 Javascript
浅谈JavaScript中Date(日期对象),Math对象
Feb 05 Javascript
JavaScript实现跑马灯抽奖活动实例代码解析与优化(一)
Feb 16 Javascript
JavaScript学习笔记之数组的增、删、改、查
Mar 23 Javascript
基于MVC5和Bootstrap的jQuery TreeView树形控件(一)之数据支持json字符串、list集合
Aug 11 Javascript
JS处理一些简单计算题
Feb 24 Javascript
Javascript获取某个月的天数
May 30 Javascript
详解webpack-dev-server使用方法
Sep 14 Javascript
bootstrap-treeview实现多级树形菜单 后台JSON格式如何组织?
Jul 26 Javascript
微信小程序移动拖拽视图-movable-view实例详解
Aug 17 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入门教程 精简版
2009/12/13 PHP
php导出csv文件,可导出前导0实例代码
2016/11/16 PHP
PHP面向对象程序设计中的self、static、parent关键字用法分析
2019/08/14 PHP
JavaScript中的onerror事件概述及使用
2013/04/01 Javascript
javascript从image转换为base64位编码的String
2014/07/29 Javascript
js实现带关闭按钮始终显示在网页最底部工具条的方法
2015/03/02 Javascript
跟我学习javascript的prototype,getPrototypeOf和__proto__
2015/11/17 Javascript
Bootstrap轮播插件使用代码
2016/10/11 Javascript
jquery dataTable 后台加载数据并分页实例代码
2017/06/07 jQuery
jQuery Validate格式验证功能实例代码(包括重名验证)
2017/07/18 jQuery
Angular实现表单验证功能
2017/11/13 Javascript
vue-cli3 配置开发与测试环境详解
2019/05/17 Javascript
在vue-cli 3中给stylus、sass样式传入共享的全局变量
2019/08/12 Javascript
微信小程序实现翻牌抽奖动画
2020/09/21 Javascript
python获取标准北京时间的方法
2015/03/24 Python
举例讲解Python的Tornado框架实现数据可视化的教程
2015/05/02 Python
python 安装virtualenv和virtualenvwrapper的方法
2017/01/13 Python
python使用pyqt写带界面工具的示例代码
2017/10/23 Python
Django使用 Bootstrap 样式修改书籍列表过程解析
2019/08/09 Python
Python列表元素常见操作简单示例
2019/10/25 Python
原来我一直安装 Python 库的姿势都不对呀
2019/11/11 Python
wxPython电子表格功能wx.grid实例教程
2019/11/19 Python
浅谈Python协程
2020/06/17 Python
使用HTML5 IndexDB存储图像和文件的示例
2018/11/05 HTML / CSS
挪威太阳镜和眼镜网上商城:SmartBuyGlasses挪威
2016/08/20 全球购物
泰国演唱会订票网站:StubHub泰国
2018/02/26 全球购物
碧欧泉法国官网:Biotherm法国
2019/10/23 全球购物
前台文员的岗位职责
2013/11/14 职场文书
工程总经理工作职责
2013/12/09 职场文书
工作会议欢迎词
2014/01/16 职场文书
给水工程专业毕业生自荐信
2014/01/28 职场文书
争先创优活动总结
2014/08/27 职场文书
2014年政务公开工作总结
2014/12/09 职场文书
2015年售后服务工作总结
2015/04/25 职场文书
校长一岗双责责任书
2015/05/09 职场文书
html form表单基础入门案例讲解
2021/07/15 HTML / CSS