[英]Customize Highchart tooltip
我想自定義工具提示。 我想將某些系列放在某些地方。 就像頂部的2系列和底部的2系列。 我希望這個看起來像這樣
另外,如何在工具提示中添加箭頭? 現在,它只是作為一個盒子來的。
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Efficiency Optimization by Branch'
},
xAxis: {
categories: [
'Seattle HQ',
'San Francisco',
'Tokyo'
]
},
yAxis: [{
min: 0,
title: {
text: 'Employees'
}
}, {
title: {
text: 'Profit (millions)'
},
opposite: true
}],
legend: {
shadow: false
},
tooltip: {
shared: true
},
plotOptions: {
column: {
grouping: false,
shadow: false,
borderWidth: 0
}
},
series: [{
name: 'Employees',
color: 'rgba(165,170,217,1)',
data: [150, 73, 20],
pointPadding: 0.3,
pointPlacement: -0.2
}, {
name: 'Employees Optimized',
color: 'rgba(126,86,134,.9)',
data: [140, 90, 40],
pointPadding: 0.4,
pointPlacement: -0.2
}, {
name: 'Profit',
color: 'rgba(248,161,63,1)',
data: [183.6, 178.8, 198.5],
tooltip: {
valuePrefix: '$',
valueSuffix: ' M'
},
pointPadding: 0.3,
pointPlacement: 0.2,
yAxis: 1
}, {
name: 'Profit Optimized',
color: 'rgba(186,60,61,.9)',
data: [203.6, 198.8, 208.5],
tooltip: {
valuePrefix: '$',
valueSuffix: ' M'
},
pointPadding: 0.4,
pointPlacement: 0.2,
yAxis: 1
}]
});
為此,您需要使用tooltip.formatter
Api文檔和一些CSS。
JS
tooltip: {
shared: true,
useHTML:true,
formatter: function(){
var text = this.x + '<br>';
text+= '<span class="number"><span style="color:' + this.points[0].color + '">\u25CF</span>' + this.points[0].series.name + '</span><span class="number">' + '<span style="color:' + this.points[1].color + '">\u25CF</span>' + this.points[1].series.name + '</span><br>';
text+= '<span class="number">' + this.points[0].y+ '</span><span class="number">' +this.points[1].y+ '</span></br>'
text+= '<span class="number"><span style="color:' + this.points[2].color + '">\u25CF</span>' + this.points[2].series.name + '</span><span class="number">' + '<span style="color:' + this.points[3].color + '">\u25CF</span>' + this.points[3].series.name + '</span><br>';
text+= '<span class="number">' + this.points[2].y+ '</span><span class="number">' +this.points[3].y+ '</span></br>'
return text;
}
},
CSS
.number{
width:34%;
padding:1%;
display:inline-block;
text-align:center;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.