如何使系列颜色和灰色系列独立工作。 如果单击小提琴示例中的单选按钮,则图表的一部分将显示为灰色,其余部分为颜色。我想用彩色和灰色显示图例。
London - blue
London - gray
以下是jsfiddle
$(function () {
var grayblue = '#1D1D1D';
var grayred = '#4C4C4C';
dataLondon = [ 48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2];
dataBerlin = [ 42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1]
highcharts(dataLondon, dataBerlin, 0);
$(':input[type="radio"]').on("click", function() {
selected = 12 - $(this).val();
tempLondon = [];
tempBerlin = [];
for(var i in dataLondon) {
bLondon = {};
bBerlin = {};
if(i >= selected) {
bLondon['y'] = dataLondon[i];
bLondon['color'] = grayblue;
tempLondon.push(bLondon);
} else {
tempLondon.push(dataLondon[i]);
}
}
for(var i in dataBerlin) {
bLondon = {};
bBerlin = {};
if(i >= selected) {
bBerlin['y'] = dataBerlin[i];
bBerlin['color'] = grayred;
tempBerlin.push(bBerlin);
} else {
tempBerlin.push(dataBerlin[i]);
}
}
highcharts(tempLondon, tempBerlin, selected);
});
function highcharts(dataLondon, dataBerlin, number) {
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Monthly Average Rainfall'
},
subtitle: {
text: 'Source: WorldClimate.com'
},
xAxis: {
categories: [
'Jan',
'Feb',
'Mar',
'Apr',
'May',
'Jun',
'Jul',
'Aug',
'Sep',
'Oct',
'Nov',
'Dec'
],
plotBands: [{ color: '#ADADAD',
from: -0.5,
to: number - 0.5
}]
},
yAxis: {
min: 0,
title: {
text: 'Rainfall (mm)'
}
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
colors: ['#0000FF', '#FF0000'],
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: 'London',
data: dataLondon
}, {
name: 'Berlin',
data: dataBerlin
}]
});
}
});