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. elasticsearch-5.x JAVA API（001）

    Elasticsearch JAVA API 极其广泛,把所有的方法意义介绍出来显然不太现实.从1.x到2.x,在到5.x,最后到6.0,也不过短短两三年的时间,我挑选了5.4.0版本分三部分把平时常 ...

  2. JAVA设计模式---命令模式

    1.定义: 将“请求”封装成对象,以便使用不同的请求.队列或者日志来参数化其他对象,命令模式也支持可撤销的操作.命令可以用来实现日志和事务系统. 2.实例: 1)需求:设计一个家电遥控器的API,遥控 ...

  3. ABP官方文档翻译 4.6 审计日志

    审计日志 介绍 关于IAuditingStore 配置 通过特性启用/禁用 注意事项 介绍 维基百科:“审计追踪(也称为审计日志)是与安全相关的按时间先后的记录.记录集合.记录的目的地和源,提供一系列 ...

  4. Laravel (5.5.33) 加载过程（一）

    说明:  由于公司项目使用Laravel 框架  也是第一次接触此框架  作为一个新手 记录使用过程的一些事情  以及对于框架源码分析的记录  整理自己的思路 也希望对大家有帮助  如果那里不对的地方 ...

  5. BZOJ 4259: 残缺的字符串 [FFT]

    4259: 残缺的字符串 题意:s,t,星号任意字符,匹配方案数 和上题一样 多乘上一个\(a_{j+i}\)就行了 #include <iostream> #include <cs ...

  6. BZOJ 3698: XWW的难题 [有源汇上下界最大流]

    3698: XWW的难题 题意:(1)A[N][N]=0:(2)矩阵中每行的最后一个元素等于该行前N-1个数的和:(3)矩阵中每列的最后一个元素等于该列前N-1个数的和.给A中的数进行取整操作(可以是 ...

  7. 汇编语言2（mooc）

    伪指令没有:冒号.

  8. 基于Spring Boot，使用JPA动态调用Sql查询数据

    在<基于Spring Boot,使用JPA操作Sql Server数据库完成CRUD>,<基于Spring Boot,使用JPA调用Sql Server数据库的存储过程并返回记录集合 ...

  9. Centos 6.9--配置python3.5

    安装python3.5可能使用的依赖 yum install openssl-devel bzip2-devel expat-devel gdbm-devel readline-devel sqlit ...

  10. vagrant系列教程(二)：vagrant的配置文件vagrantfile详解（转）

    原文:http://blog.csdn.net/hel12he/article/details/51089774 上一篇文章完整的讲叙了如何安装一个vagrant的环境.这里主要说一说vagrant的 ...