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。

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

<强> EDITS

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

.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。

如何在Highcharts中扩展Tooltip范围

1 个答案: