javascript - 如何扩展 Highcharts 中的工具提示范围

Question

如何扩展 Combo-Meteogram 中的工具提示区域例如，如果您越过风箭头，工具提示也会显示？

我在 Highcharts Tooltip 中找不到任何选项这给了我这个选择。

Answer 1

这些箭头不是绘制的，而是使用 chart.renderer 渲染的。所以你需要自己触发工具提示。看这个问题here这有点接近你想要的。

应用该答案中的想法修改 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();
});

这是更新的 fiddle .

请注意，这并不完美。它要求您将鼠标悬停在箭头上而不是框上。如果今晚或明天早上我有时间，我会解决这个问题。 :)

编辑

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

.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()

已更新example here .