编程 Javascript

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程序设计有所帮助。

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

- Author -

翱翔天地

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

几款极品的javascript压缩混淆工具

May 16 Javascript

Javascript select下拉框操作常用方法

Nov 09 Javascript

myEvent.js javascript跨浏览器事件框架

Oct 24 Javascript

了解了这些才能开始发挥jQuery的威力

Oct 10 Javascript

js 鼠标移动显示图片的简单实例

Dec 25 Javascript

JQuery实现鼠标移动图片显示描述层的方法

Jun 25 Javascript

JavaScript必知必会(七)js对象继承

Jun 08 Javascript

jQuery基于排序功能实现上移、下移的方法

Nov 26 Javascript

JavaScript cookie详解及简单实例应用

Dec 31 Javascript

jquery 仿锚点跳转到页面指定位置的实例

Feb 14 Javascript

微信小程序判断手机号的实现代码

Apr 19 Javascript

操作按钮悬浮固定在微信小程序底部的实现代码

Aug 02 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