目前我正在尝试使用3个饼图创建单个Highchart图表。 (所有图表都包含完全相同数量的数据点)。当我将鼠标悬停在一块馅饼上时,我希望在同一给定点的所有3个饼图上显示3个工具提示。
我尝试使用
{
tooltip: { split: true}
}
但抛出了JavaScript错误,似乎无法在饼图上运行。我似乎无法使其正常工作。我也尝试重新定义Highcharts.Tooltip.prototype.renderSplit
,但无法使其工作。
答案 0 :(得分:1)
您可以在图表加载事件上创建多个工具提示,并通过事件点鼠标管理它们。
为每个系列创建一个工具提示
Highcharts.chart('container', {
chart: {
type: 'pie',
events: {
load() {
this.tooltips = this.series.slice(1).map(
series => new Highcharts.Tooltip(
this,
Highcharts.merge(this.options.tooltip)
)
)
}
}
},
鼠标悬停在tooltip.refresh(point)
上,其中point是应该悬停的点。我呼吁使用相同名称的点。
plotOptions: {
series: {
point: {
events: {
mouseOver(e) {
const otherSeries = this.series.chart.series.filter(
series => series !== this.series
)
const otherPoints = otherSeries.map(
series => series.points.find(
point => point.name === this.name
)
)
this.series.chart.tooltips.forEach((tooltip, i) => {
tooltip.refresh(otherPoints[i])
})
}
}
}
}
},
包装工具提示的隐藏方法,以便同时隐藏所有工具提示。
Highcharts.wrap(Highcharts.Tooltip.prototype, 'hide', function(p, delay) {
if (this === this.chart.tooltip) {
p.call(this, delay)
this.chart.tooltips.forEach(tooltip => {
p.call(tooltip, delay)
})
}
})
直播示例:https://jsfiddle.net/8w30m3o8/
如果您不希望工具提示在系列之间切换,则应为特定系列分配工具提示,例如:主要工具提示应仅使用第一个系列中的点进行刷新,第二个工具提示应使用第二个系列中的点进行刷新,依此类推。
可能更简单的解决方案是使用3个图表并同步工具提示,就像在此示例中所做的那样:https://www.highcharts.com/demo/synchronized-charts