HighCharts之2D半圆环图

1、实例源码

HalfDonut.html：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HighCharts 2D半圆环图</title>
<script type="text/javascript" src="../scripts/jquery-1.11.0.js"></script>
<script type="text/javascript" src="../scripts/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、实例结果

HighCharts之2D半圆环图的更多相关文章

  1. HighCharts之2D面积图

    HighCharts之2D面积图  1.HighCharts之2D面积图源码 <!DOCTYPE html> <html> <head> <meta char ...

  2. HighCharts之2D折线图

    HighCharts之2D折线图 1.HighCharts之2D折线图源码 line.html: <!DOCTYPE html> <html> <head> < ...

  3. HighCharts之2D金字塔图

    HighCharts之2D金字塔图 1.实例源码 Pyramid.html: <!DOCTYPE html> <html> <head> <meta char ...

  4. HighCharts之2D圆环图

    HighCharts之2D圆环图 1.实例源码 Donut.html: <!DOCTYPE html> <html> <head> <meta charset ...

  5. HighCharts之2D数值带有百分数的面积图

    HighCharts之2D数值带有百分数的面积图 1.HighCharts之2D数值带有百分数的面积图源码 AreaPercentage.html: <!DOCTYPE html> < ...

  6. HighCharts之2D堆面积图

    HighCharts之2D堆面积图 1.HighCharts之2D堆面积图源码 StackedArea.html: <!DOCTYPE html> <html> <hea ...

  7. HighCharts之2D含有负值的面积图

    HighCharts之2D含有负值的面积图 1.HighCharts之2D含有负值的面积图源码 AreaNegative.html: <!DOCTYPE html> <html> ...

  8. HighCharts之2D带Label的折线图

    HighCharts之2D带Label的折线图 1.HighCharts之2D带Label的折线图源码 LineLabel.html: <!DOCTYPE html> <html&g ...

  9. HighCharts之2D堆条状图

    HighCharts之2D堆条状图 1.HighCharts之2D堆条状图源码 StackedBar.html: <!DOCTYPE html> <html> <head ...

随机推荐

  1. Effective Java 之 --- 用私有构造器或者枚举类型强化Singleton属性

    Singleton指仅仅被实例化一次的类,通常用来代表那些本质上唯一的系统组件,实现Singleton有三种方法: 1)公有静态成员是个final域,享有特权的用户可以调用AccessibleObje ...

  2. null undefiend NaN

    console.log(typeof NaN) console.log(typeof undefined) console.log(typeof null)

  3. 分离Webpack开发环境与生产环境的配置

    这是Webpack+React系列配置过程记录的第五篇.其他内容请参考: 第一篇:使用webpack.babel.react.antdesign配置单页面应用开发环境 第二篇:使用react-rout ...

  4. Java内存回收机制基础[转]

    原文链接:http://blog.jobbole.com/37273/ 在Java中,它的内存管理包括两方面:内存分配(创建Java对象的时候)和内存回收,这两方面工作都是由JVM自动完成的,降低了J ...

  5. BZOJ 1998: [Hnoi2010]Fsk物品调度 [置换群 并查集]

    传送门 流水线上有n个位置,从0到n-1依次编号,一开始0号位置空,其它的位置i上有编号为i的盒子.Lostmonkey要按照以下规则重新排列这些盒子. 规则由5个数描述,q,p,m,d,s,s表示空 ...

  6. 异步请求时有时会让js不起作用，那么重新加载js

    function reloadSmartMenu() { var jsElem = document.createElement('script'); jsElem.src= path+'/syste ...

  7. PyPI使用国内源

    默认的pip源的速度实在无法忍受,于是便搜集了一些国内的pip源,如下: 阿里云 https://mirrors.aliyun.com/pypi/simple/中国科技大学 https://pypi. ...

  8. Chrome浏览器的使用

    1 切换Tab 方法一: Ctrl+Tab键,标签页往前循环,或者说往右循环.Ctrl+Shift+Tab键,标签页往后循环,或者说往左循环 方法二: Ctrl + 数字键 Ctrl + 1 : 切换 ...

  9. prop&attr区别和用法,以多选框为例

    1.比较 相同点 : prop和attr作为jquery的方法都可以获取属性值; 不同点 : (1) 对于HTML元素本身就带有的固有属性,使用prop方法, attr获取checkbox的check ...

  10. angular4升级angular5问题记录之No NgModule metadata found for 'AppModule'

    在将项目从angular4升级到angular5的过程中,出现No NgModule metadata found for 'AppModule'问题,网上查找答案将app.module.ts进行再次 ...