Javascript 自定义图表工具提示
我想自定义我的工具提示。我想在某个地方定位某个系列。如顶部有2个系列,底部有2个系列。我希望这个看起来像这样 另外,如何在工具提示中添加箭头?现在它只是一个盒子Javascript 自定义图表工具提示,javascript,jquery,highcharts,tooltip,Javascript,Jquery,Highcharts,Tooltip,我想自定义我的工具提示。我想在某个地方定位某个系列。如顶部有2个系列,底部有2个系列。我希望这个看起来像这样 另外,如何在工具提示中添加箭头?现在它只是一个盒子 Highcharts.chart('container', { chart: { type: 'column' }, title: { text: 'Efficiency Optimization by Branch' }, xAxis: {
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
}]
});
要做到这一点,您需要使用
工具提示.formatter
和一些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;
}
},
.number{
width:34%;
padding:1%;
display:inline-block;
text-align:center;
}
小问题。默认情况下,我隐藏了一些序列。因此,工具提示根本不起作用。无论如何,我们可以让它充满活力。下面是相同的示例,其中隐藏了两个系列,但工具提示不起作用。