如何在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 。