如何在将鼠标悬停在highcarts中堆叠的标签上时添加工具提示

Question

是否有任何方法可以将工具提示添加到高图表中的stackedLabels中，如以下示例中所示：我有男性和女性作为我的堆栈名称，我将它们放在图表的底部。。然而，如果它们是长名称，我会添加省略号，在这种情况下，有没有一种方法可以在悬停在工具提示中看到整个名称？小提琴：http://jsfiddle.net/rq8m7e0v/

代码：

Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Stacked column chart'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas', "getete"]
},
yAxis: {
min: 0,


title: {
text: 'Total fruit consumption'
},
stackLabels: {
verticalAlign: 'bottom',
y:90,
enabled: true,
formatter: function() {
return this.stack;
}

}
},

plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true
}
}
},
series: [{
name: 'John',
data: [53, 33, 43,63,7,83],
stack: 'male'
}, {
name: 'Joe',
data: [33, 43,43,63,73,8],
stack: 'female'
}, {
name: 'Jane',
data: [42, 54,43,62,74,84],
stack: 'male',

}, {
name: 'Janet',
data: [34, 40, 42,36,74,83],
stack: 'female',
}]
});

Answer 1

Highcharts没有内置的堆栈标签工具提示，但您仍然可以为此创建自己的工具提示。将自定义事件添加到legendItem(例如mouseover和mouseout(并显示工具提示很简单。

events: {
load: function() {
var stackLabels = this.yAxis[0].stacking.stackTotalGroup.element.children,
somePoint = this.series[0].points[0],
chart = this;
for (let i = 0; i < stackLabels.length; i++) {
stackLabels[i].addEventListener('mouseover', function() {
// show custom tooltip
});
}
}
}

---

现场演示：http://jsfiddle.net/BlackLabel/orqyLjct/

API：https://www.highcharts.com/docs/extending-highcharts/extending-highcharts