如何在高图表中扩展工具提示范围

How to extend Tooltip Range in Highcharts

本文关键字：扩展 工具提示 范围 高图表      更新时间：2023-09-26

如何扩展组合气象图示例中的工具提示区域，以便在越过风箭头时也显示工具提示？

我在Highcharts Tooltip中找不到任何可以提供该选项的选项。

这些箭头不会绘制，而是使用chart.renderer进行渲染。因此，您需要自己触发工具提示。看看这个问题，它有点接近你想要的。

应用该答案中的思想修改drawWindArrows函数的末尾，如下所示：

.add()
.on('mouseover', function () {
 chart.tooltip.refresh([Highcharts.charts[0].series[0].points[point.index],
                        Highcharts.charts[0].series[1].points[point.index],
                        Highcharts.charts[0].series[2].points[point.index]]);
})
.on('mouseout', function () {
 chart.tooltip.hide();
});

这是一把最新的小提琴。

注意，这并不完美。它要求您将鼠标悬停在箭头上，而不是框上。如果我今晚或明天早上有时间，我会安排的

编辑

要解决您在评论中提到的问题，只需使代码更加动态即可：

.on('mouseover', function () {
    var points = $.map(point.series.chart.series, function(i){
        return i.points[point.index];
     });
     chart.tooltip.refresh(points);
})
.on('mouseout', function () {
     chart.tooltip.hide();
});

为了解决我提到的问题，我在箭头顶部添加了一个透明的形状，这样鼠标悬停将有一个更大的目标：

chart.renderer.circle(x, y, 15)
    .attr({
    'stroke-width': 0,
    stroke: 'rgba(255, 255, 255, 0)',
    fill: 'rgba(255, 255, 255, 0)',
    zIndex: 10
}).add()

此处更新了示例。

相关文章：