HighCharts柱状图设置渐变色

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

利用

[javascript]  view plain copy

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

来设置渐变色

需要自定义颜色

则这样写

eg:  

[javascript]  view plain copy

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

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

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

eg:

[javascript]  view plain copy

1. $(function () {  
2.      var colors = ['#F59656', '#90BF18', '#EDCA4E'];  
3.      Highcharts.getOptions().colors = Highcharts.map(colors, function (color) {  
4.                  return {  
5.                      radialGradient: { cx:0, cy: -0.8,r:2.3 },  
6.                      stops: [[0, color], [2, Highcharts.Color(color).brighten(14).get('rgb')] // darken   
7.                      ]  
8.                  };  
9.              });  
10.     $('#container').highcharts({  
11.         chart: {  
12.             type: 'column'  
13.         },  
14.         title: {  
15.             text: 'Stacked column chart'  
16.         },  
17.         xAxis: {  
18.             categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']  
19.         },  
20.         yAxis: {  
21.             min: 0,  
22.             title: {  
23.                 text: 'Total fruit consumption'  
24.             }  
25.         },  
26.         tooltip: {  
27.             pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.percentage:.0f}%)<br/>',  
28.             shared: true  
29.         },  
30.         plotOptions: {  
31.             column: {  
32.                 stacking: 'percent'  
33.             }  
34.         },  
35.             series: [{  
36.             name: 'John',  
37.             data: [5, 3, 4, 7, 2]  
38.         }, {  
39.             name: 'Jane',  
40.             data: [2, 2, 3, 2, 1]  
41.         }, {  
42.             name: 'Joe',  
43.             data: [3, 4, 4, 2, 5]  
44.         }]  
45.     });  
46. });           

饼图的

[javascript]  view plain copy

1. $(function () {  
2.         Highcharts.getOptions().colors = Highcharts.map(Highcharts.getOptions().colors, function(color) {  
3.     return {  
4.         radialGradient: { cx: 0.5, cy: 0.3, r: 0.7 },  
5.         stops: [  
6.             [0, color],  
7.             [1, Highcharts.Color(color).brighten(-0.3).get('rgb')] // darken  
8.         ]  
9.     };  
10. });  
11.     $('#container').highcharts({  
12.         chart: {  
13.             plotBackgroundColor: null,  
14.             plotBorderWidth: null,  
15.             plotShadow: false  
16.         },  
17.         title: {  
18.             text: 'Browser market shares at a specific website, 2010'  
19.         },  
20.         tooltip: {  
21.             pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'  
22.         },  
23.         plotOptions: {  
24.             pie: {  
25.                 allowPointSelect: true,  
26.                 cursor: 'pointer',  
27.                 dataLabels: {  
28.                     enabled: true,  
29.                     color: '#000000',  
30.                     connectorColor: '#000000',  
31.                     formatter: function() {  
32.                         return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';  
33.                     }  
34.                 }  
35.             }  
36.         },  
37.         series: [{  
38.             type: 'pie',  
39.             name: 'Browser share',  
40.             data: [  
41.                 ['Firefox',   45.0],  
42.                 ['IE',       26.8],  
43.                 {  
44.                     name: 'Chrome',  
45.                     y: 12.8,  
46.                     sliced: true,  
47.                     selected: true  
48.                 },  
49.                 ['Safari',    8.5],  
50.                 ['Opera',     6.2],  
51.                 ['Others',   0.7]  
52.             ]  
53.         }]  
54.     });  
55. });