Highcharts帶有多個區域範圍和線條系列的鼠標跟蹤行爲

Question

我創建了一個圖表，使用arearange系列作爲一種針對line系列的甘特圖形覆蓋。

JSFiddle

的問題是，將鼠標懸停在arearange系列時，工具提示跳轉到其他系列作爲移動光標從左至右。下圖顯示了這種效應（紅點代表鼠標的位置）：

我試圖如API描述設置以下選項：

plotOptions.series.stickyTracking: false 
tooltip.shared: false 

我甚至曾嘗試： tooltip.snap: 0

但是跳躍效果仍然存在。我的意圖是插入mouseOver和mouseOut事件，以便我可以在圖表下面顯示一些其他詳細信息 - 但這對目前的行爲不可行。

只有當光標直接移動到系列上時，纔有可能觸發事件嗎？這是否屬於我的配置或者是當前的highcharts版本的限制？

Answer 1

從Highcharts GitHub頁面中取得this建議，我在我的區域範圍內插入了一些額外的點，以便工具提示可以找到最接近的點（與我期待的線相反）。

查看此JSFiddle爲例。

arearange插補功能：

function interpolateAreaRange(data, splitBy) { 
    var interpolate = function(x1, x2, x3, y1, y2) { 
    return y1 + (y2 - y1) * (x2 - x1)/(x3 - x1); 
    }; 
    var newData = [], 
    step = 0, 
    xStart = 0, 
    xEnd = 0, 
    xNew = 0, 
    p = 0; 
    if (data.length > 1 && splitBy > 0) { 
    newData.push(data[0]); 
    for (var i = 1; i < data.length; i++) { 
     p = i - 1; 
     xStart = data[p][0]; 
     xEnd = data[i][0]; 
     step = (xEnd - xStart)/splitBy; 

     for (var s = 1; s <= splitBy; s++) { 
     xNew = xStart + (step * s); 
     newData.push([ 
      xNew, 
      interpolate(xStart, xNew, xEnd, data[p][1], data[i][1]), 
      interpolate(xStart, xNew, xEnd, data[p][2], data[i][2]) 
     ]); 
     } 
     newData.push(data[i]); 
    } 
    return newData; 
    } 
    return data; 
}