我正在创建一个highcharts列范围图表 . 我想要一个自定义图例，以便图例根据“legendGrouping”和该系列的相关颜色显示 . 从下面的jsfiddle示例中，我希望传奇显示：
-
跑步（绿色）
-
失败（红色）
-
非故障（黄色）
-
除外（灰色）
到目前为止，这是jsfiddle .
Highcharts.chart('ChartColumnRangeMtbf', {
chart: {
type: 'columnrange',
height: 300,
inverted: true
},
title: {
text: null
},
xAxis: {
lineColor: 'transparent',
labels: {
enabled: false
},
tickLength: 0
},
yAxis: {
gridLineWidth: 0,
max: 1511182800000,
min: 1510318800000,
lineColor: 'transparent',
startOnTick: false,
endOnTick: false,
labels: {
enabled: false
},
title: {
text: null,
},
type: 'datetime'
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
},
animation: true
},
series: {
cursor: 'pointer',
borderWidth: 0,
point: {
events: {
click: function() {
location.href = '../eventview?EventID=' + this.options.id;
}
}
}
}
},
tooltip: {
formatter: function() {
return '<b>' + this.series.name + '</b>
' +
Highcharts.dateFormat('%H:%M', this.point.low) +
' - ' + Highcharts.dateFormat('%H:%M', this.point.high);
}
},
legend: {
enabled: true
},
exporting: {
enabled: false
},
credits: {
enabled: false
},
series: [{
name: 'Running',
legendGrouping: 'Running',
colorByPoint: true,
groupPadding: 0.5,
pointWidth: 50,
zIndex: 0,
data: [{
low: 1510318800000,
high: 1511182800000,
color: '#6cc14c'
}]
}, {
name: 'Events',
legendGrouping: 'Excluded',
colorByPoint: true,
groupPadding: 0.5,
pointWidth: 50,
zIndex: 2,
data: [{
"id": 294,
"low": 1510750800000,
"high": 1510751592000,
"color": "#b5b2b2"
}]
}, {
name: 'Events',
legendGrouping: 'Non-Failure',
colorByPoint: true,
groupPadding: 0.5,
pointWidth: 50,
zIndex: 2,
data: [{
"id": 256,
"low": 1510664400000,
"high": 1510677352000,
"color": "#fde54a"
}]
}, {
name: 'Events',
legendGrouping: 'Excluded',
colorByPoint: true,
groupPadding: 0.5,
pointWidth: 50,
zIndex: 2,
data: [{
"id": 238,
"low": 1510663020000,
"high": 1510664400000,
"color": "#b5b2b2"
}]
}, {
name: 'Events',
legendGrouping: 'Excluded',
colorByPoint: true,
groupPadding: 0.5,
pointWidth: 50,
zIndex: 2,
data: [{
"id": 236,
"low": 1510662963000,
"high": 1510662967000,
"color": "#b5b2b2"
}]
}, {
name: 'Events',
legendGrouping: 'Failure',
colorByPoint: true,
groupPadding: 0.5,
pointWidth: 50,
zIndex: 2,
data: [{
"id": 213,
"low": 1510661669000,
"high": 1510662860000,
"color": "#d9534f"
}]
}]
});
谢谢大家
1 回答
使用series.bar.linkedTo为Excluded（3个事件）制作常用图例 .
legend.labelFormatter格式化图例
要么
如果您可以更新系列数据并添加
color作为您在系列数据中添加的属性 . 并删除colorByPoint: true,