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. Laravel 5.4.36 session 没有保存成功问题

    session使用注意点 工作中使用的是session默认的文件缓存  在使用过发现  session()->put("key","values")  发 ...

  2. 关于dom4j解析xml

    一:相关jar包 dom4j-1.6.1.jar 二:用例xml文件 三:解析 注:可能有的小白不知道如果获取节点,so,you can: for (Iterator<Element> i ...

  3. BZOJ 1004: [HNOI2008]Cards [Polya 生成函数DP]

    传送门 题意:三种颜色,规定使用每种颜色次数$r,g,b$,给出一个置换群,求多少种不等价着色 $m \le 60,\ r,g,b \le 20$ 咦,规定次数? <组合数学>上不是有生成 ...

  4. Linux修改IP永久生效

    修改IP永久生效按以下方法: 1)修改配置文件vi /etc/sysconfig/network-scripts/ifcfg-eth0(eth0,第一块网卡,如果是第二块则为eth1) 按如下修改ip ...

  5. 微信小程序中不同页面间的参数传递

    从样式页面WXML向逻辑页面JS传递点击事件的响应函数中传递参数 <!--此为样式页面--> <block wx:for="{{postList}}" wx:fo ...

  6. 10位时间戳转为C#格式时间

    /// <summary> /// 10位时间戳转为C#格式时间 /// </summary> /// <param name=”timeStamp”></p ...

  7. CentOS安装EPEL Remi

    EPEL,Remi 因为Centos官方源很多软件都没有,编译安装又比较麻烦,可以安装EPEL源Remi源解决此问题. CentOS 5.x : wget http://dl.fedoraprojec ...

  8. 数据库之mac上mysql root密码忘记或权限错误的解决办法

    [转自  http://blog.csdn.net/u014410695/article/details/50630233] 以下方法亲测有效,过程使用的工具只有mac的终端无需workbench 当 ...

  9. 多个onload事件写法

    window.onload=function(){ function(a); function(b); }

  10. Git环境配置+VSCode中文乱码问题

    异常处理汇总-开发工具  http://www.cnblogs.com/dunitian/p/4522988.html 1.VSCode中文乱码问题 (files.autoguessEncoding= ...