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. R语言-探索两个变量

    目的: 通过探索文件pseudo_facebook.tsv数据来学会两个变量的分析流程 知识点: 1.ggplot语法 2.如何做散点图 3.如何优化散点图 4.条件均值 5.变量的相关性 6.子集散 ...

  2. c# 颜色RGB到HSB互相转换

    /// <summary> /// 色相,饱和度,亮度转换成rgb值 /// </summary> /// <returns></returns> pu ...

  3. 【三思笔记】 全面学习Oracle分区表及分区索引

    [三思笔记]全面学习Oracle分区表及分区索引 2008-04-15 关于分区表和分区索引(About PartitionedTables and Indexes) 对于 10gR2 而言,基本上可 ...

  4. JMeter生成HTML性能报告

    有时候我们写性能报告的时候需要一些性能分布图,JMeter是可以生成HTML性能报告的 一.准备工作 1:jmeter3.0版本之后开始支持动态生成测试报表 2:jdk版本1.7以上 3:需要jmx脚 ...

  5. bzoj 3033: 太鼓达人 [欧拉回路]

    3033: 太鼓达人 题意:长m的01环,每个长k的子串都是不同的01串.给出k,求最大的M以及字典序最小的方案. \(M=2^k\) 可以把k-1位01串看成点,k位01串就是边,满足欧拉回路的条件 ...

  6. ORM规约变更经典案例---mysql军规

    先介绍一下<MySQL数据库开发的三十六条军规>,这里只介绍核心的,具体内容大家可以自行百度,这是从底层开发人员到管理者必须知道规范.出自58赶集. 写在前面的话: 总是在灾难发生后,才想 ...

  7. asp.net core 中 sql server 2017 数据库连接测试

    使用sql server 2017 进行连接: 配置appsettings.json文件 { "ConnectionStrings": { "DefaultConnect ...

  8. 阶段小项目2：显示bin格式图片

    #include<stdlib.h>#include<stdio.h>#include<string.h>#include<error.h>#inclu ...

  9. arm-点亮led灯

    点亮指路灯:学习四环节:led原理图分析,芯片手册导读,思维导图设计,为什么要使用led:通常led是作为程序调试的重要手段.led原理图:led实质为发光二极管,当其两端电压一定时,即处于导通状态. ...

  10. ACE-6.1.0 linux 下的编译与安装步骤

    ACE-6.1.0 linux 下的编译与安装步骤  引用至http://www.cnblogs.com/liangxiaxu/archive/2013/03/07/2948417.html 1.从  ...