我写了以下图表:
monthlyColumnChart = Highcharts.chart('MonthlyColumnChart', {
chart: {
type: 'column',
events: {
load: function (event) {
var theSeries = this.series[1];
var theCompSeries = this.series[0];
var theData = theSeries.data;
var theCompData = theCompSeries.data;
for (var i = 0; i < theData.length; i++) {
var theDataPoint = theData[i].y
var theCompDataPoint = theCompData[i].y;
if (theData[i].y < theCompData[i].y) {
theSeries.points[i].update({
color: '#94d200',
});
} else {
theSeries.points[i].update({
color: '#d34810',
});
}
}
}
},
height: 450,
marginTop: 60,
spacingBottom: 30,
},
exporting: {
enabled: false
},
credits: {
href: " ",
text: " "
},
title: {
align: 'left',
verticalAlign: 'bottom',
useHTML: true,
x: -10,
y: 25,
style: {
color: 'white',
'background-color': '#94d200',
fontWeight: 'bold',
fontSize: '14px',
},
text: '    Consumptionoverview current year       '
},
xAxis: {
categories: ["Jannuar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember"],
},
yAxis: [{
min: 0,
title: {
text: 'kWh'
}
}],
legend: {
align: 'center',
enabled: true,
floating: true,
verticalAlign: 'top',
y: 10,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
shadow: false
},
tooltip: {
shared: true,
valueDecimals: 2
},
plotOptions: {
column: {
grouping: false,
shadow: false,
borderWidth: 0
},
},
series: [{
name: '\u2205 Consumption (kWh)',
color: 'rgba(152,152,152,1)',
data: [10,12,11,10,14,12,11,9,17,12,13,11],
animation: {
duration: 1000,
easing: 'easeOutBounce',
},
}, {
name: 'Consumption (kWh)',
color: '#94d200',
pointPadding: 0.2,
pointPlacement: 0.1,
data: [9,8,13,14,14,14,14,14,14,14,14,9],
animation: {
duration: 1000,
easing: 'easeOutBounce',
},
}]
});
http://jsfiddle.net/h6r5pb0e/8/
如您所见,根据值的高度,我有两个系列和一个带有两种可能的颜色的系列(请参见chart.event)。自动生成的图例具有两个系列,但仅具有一种颜色(列的默认颜色)。我需要的是第二种颜色的附加图例项目,包括颜色和说明。有没有办法手动添加此图例项目?