我正在创建一个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><br/>' +
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"
}]
}]
});
全部谢谢
答案 0 :(得分:0)
使用series.bar.linkedTo为Excluded(3个事件)制作常用图例。
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><br/>' +
Highcharts.dateFormat('%H:%M', this.point.low) +
' - ' + Highcharts.dateFormat('%H:%M', this.point.high);
}
},
legend: {
symbolPadding: 0,
symbolWidth: 0.1,
symbolHeight: 0.1,
symbolRadius: 0,
useHTML: true,
labelFormatter: function() {
//console.log(this.userOptions.legendGrouping)
return '<div>' +
'<div style="width: 18px; height: 12px; display: inline-block; background-color: ' + this.options.data[0].color + ';"> </div>' +
"<span> " + this.userOptions.legendGrouping + " </span>" +
'</div>'
}
},
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,
id:'ex',
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',
linkedTo:'ex',
legendGrouping: 'Excluded',
colorByPoint: true,
groupPadding: 0.5,
pointWidth: 50,
zIndex: 2,
data: [{
"id": 238,
"low": 1510663020000,
"high": 1510664400000,
"color": "#b5b2b2"
}]
}, {
name: 'Events',
legendGrouping: 'Excluded',
linkedTo:'ex',
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"
}]
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<div id="ChartColumnRangeMtbf" style="min-width: 300px; height: 300px; margin: 0 auto"></div>
或者
如果您可以更新系列数据并添加color
作为您在系列数据中添加的属性。并删除colorByPoint: true,
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><br/>' +
Highcharts.dateFormat('%H:%M', this.point.low) +
' - ' + Highcharts.dateFormat('%H:%M', this.point.high);
}
},
legend: {
useHTML: true,
labelFormatter: function() {
return this.userOptions.legendGrouping
}
},
exporting: {
enabled: false
},
credits: {
enabled: false
},
series: [{
name: 'Running',
legendGrouping: 'Running',
color: '#6cc14c',
groupPadding: 0.5,
pointWidth: 50,
zIndex: 0,
data: [{
low: 1510318800000,
high: 1511182800000,
color: '#6cc14c'
}]
}, {
name: 'Events',
legendGrouping: 'Excluded',
"color": "#b5b2b2",
groupPadding: 0.5,
pointWidth: 50,
zIndex: 2,
id:'ex',
data: [{
"id": 294,
"low": 1510750800000,
"high": 1510751592000,
"color": "#b5b2b2"
}]
}, {
name: 'Events',
legendGrouping: 'Non-Failure',
"color": "#fde54a",
groupPadding: 0.5,
pointWidth: 50,
zIndex: 2,
data: [{
"id": 256,
"low": 1510664400000,
"high": 1510677352000,
"color": "#fde54a"
}]
}, {
name: 'Events',
linkedTo:'ex',
legendGrouping: 'Excluded',
"color": "#b5b2b2",
groupPadding: 0.5,
pointWidth: 50,
zIndex: 2,
data: [{
"id": 238,
"low": 1510663020000,
"high": 1510664400000,
"color": "#b5b2b2"
}]
}, {
name: 'Events',
legendGrouping: 'Excluded',
linkedTo:'ex',
"color": "#b5b2b2",
groupPadding: 0.5,
pointWidth: 50,
zIndex: 2,
data: [{
"id": 236,
"low": 1510662963000,
"high": 1510662967000,
"color": "#b5b2b2"
}]
}, {
name: 'Events',
legendGrouping: 'Failure',
"color": "#d9534f",
groupPadding: 0.5,
pointWidth: 50,
zIndex: 2,
data: [{
"id": 213,
"low": 1510661669000,
"high": 1510662860000,
"color": "#d9534f"
}]
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<div id="ChartColumnRangeMtbf" style="min-width: 300px; height: 300px; margin: 0 auto"></div>