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. 蓝桥杯练习系统— 算法训练 Beaver's Calculator

    问题描述 从万能词典来的聪明的海狸已经使我们惊讶了一次.他开发了一种新的计算器,他将此命名为"Beaver's Calculator 1.0".它非常特别,并且被计划使用在各种各样 ...

  2. WTF小程序之wxs

    前言 对于从VUE过来的前端同学来说,见到小程序的第一眼一定是熟悉-感觉就像是把vue的单文件拆成了3个文件.但是,随着慢慢入坑.马上会发现,这样怎么不行?wxs文件又是什么鬼?template和vu ...

  3. 新建play项目eclipsify后导入eclipse后无法debug调试

    Error occurred during initialization of VMagent library failed to init: jdwpERROR: Cannot load this ...

  4. LVS、Nginx和HAProxy负载均衡器对比总结

    LVS特点: 1.抗负载能力强,使用IP负载均衡技术,只做分发,所以LVS本身并没有多少流量产生: 2.稳定性.可靠性好,自身有完美的热备方案:(如:LVS+Keepalived) 3.应用范围比较广 ...

  5. WPF: 只读依赖属性的介绍与实践

    在设计与开发 WPF 自定义控件时,我们常常为会控件添加一些依赖属性以便于绑定或动画等.事实上,除了能够添加正常的依赖属性外,我们还可以为控件添加只读依赖属性(以下统称"只读属性" ...

  6. 使用webpack、babel、react、antdesign配置单页面应用开发环境

    这是Webpack+React系列配置过程记录的第一篇.其他内容请参考: 第一篇:使用webpack.babel.react.antdesign配置单页面应用开发环境 第二篇:使用react-rout ...

  7. 二分图匹配 洛谷 [P3386]

    最为经典的匈牙利算法 匈牙利算法应用了增广路的性质,实际上就是通过搜索可行的增广路,每搜到一条,匹配数++ 还可以应用配对的方法去理解,此算法的时间复杂度 (V*E),比较慢,但是实现较为简单. df ...

  8. CodeChef Chef and Churu [分块]

    题意: 单点修改$a$ 询问$a$的区间和$f$的区间和 原来普通计算机是这道题改编的吧... 对$f$分块,预处理$c[i][j]$为块i中$a_j$出现几次,$O(NH(N))$,只要每个块差分加 ...

  9. XML+JSON面试题都在这里

    XML+JSON常见面试题 什么是JSON和XML 什么是JSON和XML JSON:JavaScript Object Notation [JavaScript 对象表示法]. XML:extens ...

  10. 简单http文件服务器

    日常工作中,主要是通过ssh终端(putty等)远程开发,经常涉及到传输文件,因为本地系统为Win10,所以没办法利用强大的linux脚本来进行文件传输.之前用过python的SimpleHttp模块 ...