HighCharts之2D颜色阶梯饼图

1、实例源码

PieGradient.html：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>HighCharts 2D颜色阶梯饼图</title>
  6. <script type="text/javascript" src="../scripts/jquery-1.11.0.js"></script>
  7. <script type="text/javascript" src="../scripts/js/highcharts.js"></script>
  8. <script type="text/javascript">
  9.      $(function(){
  10.     	//
  11.  		Highcharts.getOptions().colors = Highcharts.map(Highcharts.getOptions().colors, function(color) {
  12.  		    return {
  13.  		        radialGradient: { cx: 0.8, cy: 0.5, r: 0.6 },
  14.  		        stops: [
  15.  		            [0, color],
  16.  		            [1, Highcharts.Color(color).brighten(-0.1).get('rgb')] // darken
  17.  		        ]
  18.  		    };
  19.  		});
  20.  
  21.  		// 构建饼图
  22.          $('#pieChart').highcharts({
  23.              chart: {
  24.                  plotBackgroundColor: '#CCCCCC',
  25.                  plotBorderWidth: '20px',
  26.                  plotShadow: true
  27.              },
  28.              title: {
  29.                  text: '2013年年收入'
  30.              },
  31.              tooltip: {
  32.          	    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
  33.              },
  34.              plotOptions: {
  35.                  pie: {
  36.                      allowPointSelect: true,
  37.                      cursor: 'pointer',
  38.                      dataLabels: {
  39.                          enabled: true,
  40.                          color: '#0000FF',
  41.                          connectorColor: '#00FF00',
  42.                          formatter: function() {
  43.                              return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';
  44.                          }
  45.                      }
  46.                  }
  47.              },
  48.              series: [{
  49.                  type: 'pie',
  50.                  name: '收入比例',
  51.                  data: [
  52.                      ['一月', 5487],
  53.                      ['二月', 8745],
  54.                      ['三月', 3451],
  55.                      ['四月', 9845],
  56.                      ['五月', 6451],
  57.                      ['六月', 7412],
  58.                      {
  59.                          name: '七月',
  60.                          y: 8888,
  61.                          sliced: true,
  62.                          selected: true
  63.                      },
  64.                      ['八月', 4151],
  65.                      ['九月', 5421],
  66.                      ['十月', 6545],
  67.                      ['十一月', 3545],
  68.                      ['十二月', 8541]
  69.                  ]
  70.              }]
  71.          });
  72.      });
  73. </script>
  74. </head>
  75. <body>
  76.    <div id="pieChart" style="width: 1250px; height: 500px; margin: 0 auto"></div>
  77. </body>
  78. </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. [DeeplearningAI笔记]ML strategy_2_1误差分析

    机器学习策略-误差分析 觉得有用的话,欢迎一起讨论相互学习~Follow Me 2.1 误差分析 训练出来的模型往往没有达到人类水平的效果,为了得到人类水平的结果,我们对原因进行分析,这个过程称为误差 ...

  2. poj2479 最大子段和

    题意:给定一个数列.求出数列中不相交的两个子段和,要求和最大 解题思路:对每一个i来说,求出[0-i-1]的最大子段和以及[i-n-1]的最大子段和,再加起来,求出最大的一个.[0-i-1]的最大子段 ...

  3. python布尔类型

    布尔类型 python当中下面的值在作为布尔表达式时,会被解释器看作False: 1.None: 2.False: 3.任何为0的数字类型,如:0,0.0,0j: 4.任何空序列,如:'',(),[] ...

  4. JDBC（二）

    三层架构的一些基本报结构如下: domain包:下面是一些实体bean,属性为private,提供属性相对应的set和get方法.一般对应于数据库中的一张数据表,属性对应于数据表中的列. dao包,数 ...

  5. BZOJ 4569: [Scoi2016]萌萌哒 [并查集 倍增]

    传送门 题意:长为$n \le 10^5$的数字,给出$m \le 10^5$个限制$[l1,r1]\ [l2,r2]$两个子串完全相等,求方案数 把所有要求相等的位置连起来,不就是$9*10^{连通 ...

  6. WPF XAML 资源样式模板属性存放位置

    WPF的XAML 资源申明 类似HTML. 整体来说分3种1.行类资源样式属性 1.1 行内属性 <Button Content="按钮" Foreground=" ...

  7. AMD && CMD

    前言 JavaScript初衷:实现简单的页面交互逻辑,寥寥数语即可: 随着web2.0时代的到来,Ajax技术得到广泛应用,jQuery等前端库层出不穷,前端代码日益膨胀 问题: 这时候JavaSc ...

  8. iOS图片轮播

    基于ScrollView的图片播放 ScrollView的方法 NSTime的循环 UIPageControl的运用 委托方法 基于iphone5 未做屏幕的适配 import "ViewC ...

  9. maven的下载安装，配置本地仓库

    maven的下载安装 下载地址:http://maven.apache.org/download.cgi 下载完成后解压到某一个目录 配置环境变量 第一个环境变量 MAVEN_HOME A:\mave ...

  10. crontab定时任务一定要记得做好备份

    今天咋服务器上敲了一个 crontab 命令(没加-e ,也没加-l, 更没加 -r) 但是竟然神奇的crontab全部被清除了. 心中一万只CN