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. JFinal源码 分析之 Core包分析

    ActionHandler.java 这个类继承了上面 说的Handler类,首先我们 上 几个属性 ,下面几个 属性我们 需要 关心哪些东西 呢?首先 是ActionMapping和RenderMa ...

  2. Git知识总览(五) Git中的merge、rebase、cherry-pick以及交互式rebase

    上篇博客聊了<git分支管理之rebase 以及 cherry-pick相关操作>本篇博客我们就以Learning Git中的关卡进行展开.下方列举了LearningGit中的 merge ...

  3. iOS-xcode代码统计

    作为开发者,想不想知道自己写了多少行代码吗,打开终端,进入项目文件夹,然后进入想统计的某个文件夹,也可以直接在当前项目文件夹,然后终端输入下面的代码就可以了 find . "(" ...

  4. 基本c功能使用不当导致崩溃

    一些基本的c语言操作,使用不当也会有出其不意的问题.比如我最近的一个项目中,用到几句代码: uint8_t * out_pcm = NULL; ....... if (NULL == out_pcm) ...

  5. POJ 1584 A Round Peg in a Ground Hole[判断凸包 点在多边形内]

    A Round Peg in a Ground Hole Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 6682   Acc ...

  6. Android逆向之so的半自动化逆向

    因为工作需要,转型干android逆向,有几个月了.不过对于so的逆向,任然停留在,难难难的阶段,虽然上次自己还是逆向了一个15k左右的小so文件,但是,那个基本是靠,一步一步跟代码,查看堆栈信息来自 ...

  7. ubunt tftp服务器搭建

    默认安装的Ubuntu系统没有包含TFTP的服务端和客户端,可以通过命令行来下载安装,步骤如下: (1)安装客户端. root@ www.linuxidc.com:~# apt-get install ...

  8. AnnotationUtils

    /** * 查询类中符合指定annotation的属性信息 * @param objCls 实体类 * @param annCls 注解类 * @return HashMap<实体属性名, An ...

  9. 使用CentOS7配置Squid代理

    其实之前配过一个squid,只是由于太懒,网上随便搜了一个教程,用了默认端口并且没有添加用户认证.某天不幸的被爬虫扫到,被用来发了半个月的垃圾邮件..直到有一天登录邮箱,看到了一大坨警告邮件,才意识到 ...

  10. 洛谷P1962 斐波那契数列【矩阵运算】

    洛谷P1962 斐波那契数列[矩阵运算] 题目背景 大家都知道,斐波那契数列是满足如下性质的一个数列: • f(1) = 1 • f(2) = 1 • f(n) = f(n-1) + f(n-2) ( ...