如何显示packedbubble
外圈的dataLabel或工具提示?
例如在Carbon emissions around the world (2014)示例中,当悬停在每个大洲上时,我需要显示每个大洲的工具提示。或尽可能显示每个标签的数据标签
答案 0 :(得分:1)
请注意,外圆只是一条没有任何属性(如x,y等)的路径,因此不适用于Highcharts工具提示功能。我想到的唯一解决方案是在此路径上的 mouseover 事件上创建自定义工具提示。
演示:https://jsfiddle.net/BlackLabel/9gkdfsnj/
代码:
events: {
render() {
var
chart = this,
series = chart.series[0],
graphic = series.parentNode.graphic,
tooltip = document.getElementById('tooltip'),
text;
text = "Sum value: " + Math.floor(series.yData.reduce((a, b) => a + b, 0));
graphic.element.onmouseover = function() {
tooltip.style.visibility = "visible";
tooltip.innerHTML = text;
tooltip.style.left = graphic.x + (tooltip.offsetWidth /2) - chart.plotLeft + 'px';
tooltip.style.top = graphic.y + graphic.height / 2 + 'px'
}
graphic.element.onmouseout = function() {
tooltip.style.visibility = "hidden"
}
}
}
这只是一个简单的示例,请随时进行改进。