以å
对æ°æ®æºçæ°æ®è¿è¡æåº
为äºè®©å¾è¡¨æ¯ä¸æ ¹æ±åçé¢è²å¯é
ç½®ï¼æ们é¦å
å®ä¹ä¸ä¸ªé¢è²æ°ç»ï¼
//å®ä¹ä¸ä¸ªå
¨å±é¢è²æ°ç»
var colorArr = ['#7cb5ec', '#434348', '#90ed7d', '#f7a35c', '#8085e9','#f15c80', '#e4d354', '#8085e8', '#8d4653', '#91e8e1','#000000','#560f23'];
å¤å¶ä»£ç
æ¥çæ们è¦è®¾ç½®æ¯ä¸ä¸ªæ±åçlinearGradientæè¡çï¼è¿éæ们éç¨å¨å¾è¡¨å建çåè°å½æ°å
å»å®æè¿ä¸ªå¨æé¢è²åæ¢çææã
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
subtitle: {
text: 'Source:
www.stepday.com'
},
xAxis: {
categories: [
'Jan',
'Feb',
'Mar',
'Apr',
'May',
'Jun',
'Jul',
'Aug',
'Sep',
'Oct',
'Nov',
'Dec'
]
},
yAxis: {
min: 0,
title: {
text: 'Rainfall (mm)'
}
},
tooltip: {
headerFormat: '{point.key}',
pointFormat: '
' +
'
',
footerFormat: '
{series.name}: {point.y:.1f} mm
',
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
credits: {
text: "
www.stepday.com",
href: "http://
www.stepday.com",
style: {
color: "red"
}
},
series: [{
name: 'Tokyo',
data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
}, function (chart) {
SetEveryOnePointColor(chart);
});
});
//设置æ¯ä¸ä¸ªæ°æ®ç¹çé¢è²å¼
function SetEveryOnePointColor(chart) {
//è·å¾ç¬¬ä¸ä¸ªåºåçæææ°æ®ç¹
var pointsList = chart.series[0].points;
//éå设置æ¯ä¸ä¸ªæ°æ®ç¹é¢è²
for (var i = 0; i < pointsList.length; i++) {
chart.series[0].points[i].update({
color: {
linearGradient: { x1: 0, y1: 0, x2: 1, y2: 0 }, //横åæ¸åææ å¦æå°x2åy2å¼äº¤æ¢å°ä¼åæ纵åæ¸åææ
stops: [
[0, Highcharts.Color(colorArr[i]).setOpacity(1).get('rgba')],
[0.5, 'rgb(255, 255, 255)'],
[1, Highcharts.Color(colorArr[i]).setOpacity(1).get('rgba')]
]
}
});
}
}
å¤å¶ä»£ç