HighCharts柱状图设置渐变色

转自：http://blog.csdn.net/u010158775/article/details/37903647

利用

             Highcharts.getOptions().colors = Highcharts.map(Highcharts.getOptions().colors, function(color) {
     return {
         radialGradient: { cx: 0.5, cy: 0.3, r: 0.7 },
         stops: [
             [0, color],
             [1, Highcharts.Color(color).brighten(-0.3).get('rgb')] // darken
         ]
     };
 });

来设置渐变色

需要自定义颜色

则这样写

eg:  

 var colors = ['#F59656', '#90BF18', '#EDCA4E'];
              Highcharts.getOptions().colors = Highcharts.map(colors, function (color) {
                  return {
                      radialGradient: { cx: 0, cy: -0.8, r: 2.3 },
                      stops: [[0, color], [2, Highcharts.Color(color).brighten(14).get('rgb')] // darken
                      ]
                  };
              });

cy 如果是负值 则表示从上到下的渐变，如果是正值则表示上边是浅色，下面是深色

brighten(14)正数表示变浅，负值是加深

eg:

 $(function () {
      var colors = ['#F59656', '#90BF18', '#EDCA4E'];
      Highcharts.getOptions().colors = Highcharts.map(colors, function (color) {
                  return {
                      radialGradient: { cx:0, cy: -0.8,r:2.3 },
                      stops: [[0, color], [2, Highcharts.Color(color).brighten(14).get('rgb')] // darken
                      ]
                  };
              });
     $('#container').highcharts({
         chart: {
             type: 'column'
         },
         title: {
             text: 'Stacked column chart'
         },
         xAxis: {
             categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
         },
         yAxis: {
             min: 0,
             title: {
                 text: 'Total fruit consumption'
             }
         },
         tooltip: {
             pointFormat: '{series.name}: {point.y} ({point.percentage:.0f}%)',
             shared: true
         },
         plotOptions: {
             column: {
                 stacking: 'percent'
             }
         },
             series: [{
             name: 'John',
             data: [5, 3, 4, 7, 2]
         }, {
             name: 'Jane',
             data: [2, 2, 3, 2, 1]
         }, {
             name: 'Joe',
             data: [3, 4, 4, 2, 5]
         }]
     });
 });

饼图的

 $(function () {
         Highcharts.getOptions().colors = Highcharts.map(Highcharts.getOptions().colors, function(color) {
     return {
         radialGradient: { cx: 0.5, cy: 0.3, r: 0.7 },
         stops: [
             [0, color],
             [1, Highcharts.Color(color).brighten(-0.3).get('rgb')] // darken
         ]
     };
 });
     $('#container').highcharts({
         chart: {
             plotBackgroundColor: null,
             plotBorderWidth: null,
             plotShadow: false
         },
         title: {
             text: 'Browser market shares at a specific website, 2010'
         },
         tooltip: {
             pointFormat: '{series.name}: {point.percentage:.1f}%'
         },
         plotOptions: {
             pie: {
                 allowPointSelect: true,
                 cursor: 'pointer',
                 dataLabels: {
                     enabled: true,
                     color: '#000000',
                     connectorColor: '#000000',
                     formatter: function() {
                         return ''+ this.point.name +': '+ this.percentage +' %';
                     }
                 }
             }
         },
         series: [{
             type: 'pie',
             name: 'Browser share',
             data: [
                 ['Firefox',   45.0],
                 ['IE',       26.8],
                 {
                     name: 'Chrome',
                     y: 12.8,
                     sliced: true,
                     selected: true
                 },
                 ['Safari',    8.5],
                 ['Opera',     6.2],
                 ['Others',   0.7]
             ]
         }]
     });
 });