HighCharts之2D颜色阶梯饼图

1、实例源码

PieGradient.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(){
    	//
 		Highcharts.getOptions().colors = Highcharts.map(Highcharts.getOptions().colors, function(color) {
 		    return {
 		        radialGradient: { cx: 0.8, cy: 0.5, r: 0.6 },
 		        stops: [
 		            [0, color],
 		            [1, Highcharts.Color(color).brighten(-0.1).get('rgb')] // darken
 		        ]
 		    };
 		});

 		// 构建饼图
         $('#pieChart').highcharts({
             chart: {
                 plotBackgroundColor: '#CCCCCC',
                 plotBorderWidth: '20px',
                 plotShadow: true
             },
             title: {
                 text: '2013年年收入'
             },
             tooltip: {
         	    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
             },
             plotOptions: {
                 pie: {
                     allowPointSelect: true,
                     cursor: 'pointer',
                     dataLabels: {
                         enabled: true,
                         color: '#0000FF',
                         connectorColor: '#00FF00',
                         formatter: function() {
                             return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';
                         }
                     }
                 }
             },
             series: [{
                 type: 'pie',
                 name: '收入比例',
                 data: [
                     ['一月', 5487],
                     ['二月', 8745],
                     ['三月', 3451],
                     ['四月', 9845],
                     ['五月', 6451],
                     ['六月', 7412],
                     {
                         name: '七月',
                         y: 8888,
                         sliced: true,
                         selected: true
                     },
                     ['八月', 4151],
                     ['九月', 5421],
                     ['十月', 6545],
                     ['十一月', 3545],
                     ['十二月', 8541]
                 ]
             }]
         });
     });
</script>
</head>
<body>
   <div id="pieChart" style="width: 1250px; height: 500px; margin: 0 auto"></div>
</body>
</html>

2、实例结果

HighCharts之2D颜色阶梯饼图的更多相关文章

  1. HighCharts之2D饼图

    HighCharts之2D饼图 1. HighCharts之2D饼图源码 <!DOCTYPE html> <html> <head> <meta charse ...

  2. HighCharts之2D对数饼图

    HighCharts之2D对数饼图 1.实例源码 LogarithmicPie.html: <!DOCTYPE html> <html> <head> <me ...

  3. HighCharts之2D柱状图、折线图和饼图的组合图

    HighCharts之2D柱状图.折线图和饼图的组合图 1.实例源码 ColumnLinePie.html: <!DOCTYPE html> <html> <head&g ...

  4. HighCharts之2D带有Legend的饼图

    HighCharts之2D带有Legend的饼图 1.实例源码 PieLegend.html: <!DOCTYPE html> <html> <head> < ...

  5. HighCharts之2D柱状图

    1.HighCharts之2D柱状图源码 column.html: <!DOCTYPE html> <html> <head> <meta charset=& ...

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

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

  7. HighCharts之2D堆面积图

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

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

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

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

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

随机推荐

  1. CentOS7安装MySQL的方法之通用二进制格式

      CentOS7安装MySQL的方法之通用二进制格式          

  2. 深入理解Python字符编码--转

    http://blog.51cto.com/9478652/2057896 不论你是有着多年经验的 Python 老司机还是刚入门 Python 不久,你一定遇到过UnicodeEncodeError ...

  3. 济南清北学堂游记 Day 5.

    十一月的第一天.算下来在济南已经呆了接近一星期了...... 还剩九天...看着洛谷的倒计时心里直发慌. 也许我不该过多纠结于高级算法,基础也是很重要的. 今天晚上就自由的敲一些板子吧.最后的九天,让 ...

  4. getHibernateTemplate() VS getSession()

    如题所示,对于这个问题,官网文档已给出答案,详见: /** * Obtain a Hibernate Session, either from the current transaction or * ...

  5. 4.C++中的函数重载,C++调用C代码,new/delete关键字,namespace(命名空间)

    本章主要内容: 1)函数重载 2)C++调用C代码 3)new/delete关键字实现动态内存分配 4)namespace命名空间 大家都知道,在生活中,动词和不同的名词搭配一起,意义都会大有不同,比 ...

  6. C++数据个数未知情况下的输入方法

    我们经常需要输入一串数,而数据个数未知.这时候就不能以数据个数作为输入是否结束的判断标准了. 这种情况下,我们可以用以下两种方法输入数据. 方法一:判断回车键(用getchar()=='\n'即可判断 ...

  7. Windows Server 2016-Active Directory域服务概述

    活动目录(AD)是一种目录服务是微软用于开发Windows域网络.它被包含在大多数Windows Server 操作系统中作为一组进程和服务.最初,Active Directory只负责集中式域管理. ...

  8. 高仿QQ Xplan的H5页面

    概述 这个h5的主要玩法很简单:地球自转的时候会播放背景音乐(比如海浪声),为了找到这个声音是从哪个地球上哪个地方传来的,需要长按下方的按钮,这时地球会自动转动到目标地点,然后镜头拉近,穿过云层,最后 ...

  9. console那些你不曾知道的玩法

    一.console最常见的四种方法: FireFox(58) Chrome(51) 二.打印对象: 平时想输出对象属性时,可以直接打印对象,对Object使用toString方法会得到 [Object ...

  10. 在Linux/Centos下用wondershaper限速

    wondershaper是国外人开发的一款在Linux内核下基于TC工具的对整块网卡的限度工具,虽然有很久没有更新了,但是测试老版本在Centos6.3上依然可以使用. 首先下载wondershape ...