Highcharts顯示最近點的原因閃爍十字和奇怪的順序

根據我的問題一年前Highchart tooltip show nearest point Highcharts顯示最近點的原因閃爍十字和奇怪的順序

其顯示在工具提示中的最近點，當兩個或多個系列不具有相等的長度

然而，當您將鼠標移動到圖表上時，您會看到系列的順序正在切換，並且十字準線正在倒退和四分之一。我錄的一段簡短的視頻在這裏

http://recordit.co/PxgJ8COnhF（上的視頻，你不會注意到的十字線錯誤）

，這裏是例如在的jsfiddle https://jsfiddle.net/ittikorns/ygscLp3h/4/

Highcharts.wrap(Highcharts.Tooltip.prototype, 'refresh', function (proceed) { 

    var args = arguments, 
     points = args[1], 
     point = points[0]; 
     if (typeof points[0] !== "undefined") { 
      chart = point.series.chart;   
     } else { 
      chart = points; 
     } 

     // Loop over all the series of the chart 
     Highcharts.each(chart.series, function(series) { 
      // This one already exist 
      if (series == point.series || series.visible==false) return; 

      var current, 
       dist, 
       distance = Number.MAX_VALUE; 
      // Loop over all the points 
      Highcharts.each(series.points, function(p) { 
       // use the distance in X to determine the closest point 
       dist = Math.abs(p.x - point.x); 
       if (dist < distance) { 
        distance = dist; 
        current = p; 
       } 
      }); 

      // Add the closest point to the array 
      if(points.indexOf(current)==-1) 
       points.push(current); 
     }); 

     proceed.apply(this, [].slice.call(args, 1)); 

}); 


$(function() { 

    $('#container').highcharts({ 

title: { 
      text: 'Monthly Average Temperature', 
      x: -20 //center 
     }, 
     subtitle: { 
      text: 'Source: WorldClimate.com', 
      x: -20 
     }, 
     xAxis: { 
      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 
       'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], 
      crosshair: true, 
     }, 
     yAxis: { 
      title: { 
       text: 'Temperature (°C)' 
      }, 
      plotLines: [{ 
       value: 0, 
       width: 1, 
       color: '#808080' 
      }] 
     }, 
     tooltip: { 
      valueSuffix: '°C', 
      shared: true, 
     }, 
     legend: { 
      layout: 'vertical', 
      align: 'right', 
      verticalAlign: 'middle', 
      borderWidth: 0 
     }, 
     series: [{ 
      name: 'Tokyo', 
      data: [25.2, 26.5, 23.3, 18.3, 13.9, 9.6] 
     }, { 
      name: 'New York', 
      data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5] 
     }]   

    }); 
});

來源

2016-08-04 Ittikorn S.

你的小提琴例子（https://jsfiddle.net/ittikorns/ygscLp3h/）打算氣泡圖。您可以在視頻中張貼圖表的小提琴嗎？謝謝！ –

我認爲這一切都取決於點數組中點的順序。現在它並不總是一樣的。您可以添加排序方法，將您的點與他們所屬系列的順序排序。看看這個代碼：

var compare = function (a, b) { 
    if (a.series._i < b.series._i) { 
     return -1 
    } else if (a.series._i > b.series._i) { 
     return 1 
    } 
    return 0 
}

在這裏你可以看到一個例子，如何它可以工作： https://jsfiddle.net/ygscLp3h/5/

在這裏，你可以找到我所做的更改：

points = points.sort(compare); 
proceed.apply(this, [].slice.call(args, 1));

，你可以請參閱我在添加標準功能之前添加了排序功能。

此致

來源

2016-08-04 15:12:52

Highcharts顯示最近點的原因閃爍十字和奇怪的順序

回答

相關問題