懸停標記在斷開連接的圖上丟失

Question

我面臨一個問題，我不確定它是否是Highcharts插件中的錯誤或編程錯誤。

我使用空值繪製一個只有一個serie的斷開線圖，但它似乎是懸停標記的問題：它們中的一些（在第一行的頂部和第二行的底部）看起來似乎不出現。代碼很簡單，但我找不到會造成這種情況的原因。

下面是一個爲例再現該問題：http://jsfiddle.net/KYXQS/9/（更新26/02）

而這裏的代碼（更新26/02）：

$(function() { 
var chart; 
$(document).ready(function() { 
    chart = new Highcharts.Chart({ 
     chart: { 
      renderTo: 'container', 
      type: 'line', 
      marginRight: 130, 
      marginBottom: 25, 
      zoomType: 'xy' 
     }, 
     title: { 
      text: 'Monthly Average Temperature', 
      x: -20 //center 
     }, 
     subtitle: { 
      text: 'Source: WorldClimate.com', 
      x: -20 
     }, 
     tooltip: { 
      formatter: function() { 
        return '<b>'+ this.series.name +'</b><br/>'+ 
        this.x +': '+ this.y +'°C'; 
      } 
     }, 
     plotOptions : 
     { 
      line : { 
       marker : 
       { 
        enabled: false, 
       } 
      } 
     }, 
     legend: { 
      layout: 'vertical', 
      align: 'right', 
      verticalAlign: 'top', 
      x: -10, 
      y: 100, 
      borderWidth: 0 
     }, 
     series: [{ 
      name: 'Red', 
      data: [[0,0],[1,1],[2,2] 
        ,null 
        ,[4,4],[5,5],[6,6] 

        ,null 
        ,[2,0],[3,1],[4,2] 
        ,null 
        ,[6,4],[7,5],[8,6] 

        ,null 
        ,[12,0],[13,1],[14,2] 
        ,null 
        ,[16,4],[17,5],[18,6] 

        ,null 
        ,[22,0],[23,1],[24,2] 
        ,null 
        ,[26,4],[27,5],[28,6] 

        ,null 
        ,[32,0],[33,1],[34,2] 
        ,null 
        ,[36,4],[37,5],[38,6] 

        ,null 
        ,[34,0],[35,1],[36,2] 
        ,null 
        ,[38,4],[39,5],[40,6] 

        ,null 
        ,[36,0],[37,1],[38,2] 
        ,null 
        ,[40,4],[41,5],[42,6] 

        ,null 
        ,[40,2],[41,2],[42,3] 
        ,null 
        ,[47,8],[48,10],[49,11] 
        ], 
      color: 'red' 
     } 
     ,{ 
      name: 'Blue', 
      data: [[2,2],[3,3],[4,4] 
        ,null 
        ,[8,8],[9,10],[10,12] 

        ,null 
        ,[4,2],[5,3],[6,4] 
        ,null 
        ,[10,8],[11,10],[12,12] 

        ,null 
        ,[14,2],[15,3],[16,4] 
        ,null 
        ,[20,8],[21,10],[22,12] 

        ,null 
        ,[24,2],[25,3],[26,4] 
        ,null 
        ,[30,8],[31,10],[32,12] 

        ,null 
        ,[34,2],[35,3],[36,4] 
        ,null 
        ,[40,8],[41,10],[42,12] 

        ,null 
        ,[36,2],[37,3],[38,4] 
        ,null 
        ,[42,8],[43,10],[44,12] 

        ,null 
        ,[38,2],[39,3],[40,4] 
        ,null 
        ,[44,8],[45,10],[46,12] 

        ,null 
        ,[42,3],[41,3],[42,4] 
        ,null 
        ,[49,11],[52,12],[53,12] 
        ], 
      color: 'blue' 
     } 
     ,{ 
      name: 'Green', 
      data: [[6,6],[7,7],[8,8] 
        ,null 
        ,[10,12],[11,15],[12,19] 

        ,null 
        ,[8,6],[9,7],[10,8] 
        ,null 
        ,[12,12],[13,15],[14,19] 

        ,null 
        ,[8,6],[9,7],[10,8] 
        ,null 
        ,[12,12],[13,15],[14,19] 

        ,null 
        ,[18,6],[19,7],[20,8] 
        ,null 
        ,[22,12],[23,15],[24,19] 

        ,null 
        ,[28,6],[29,7],[30,8] 
        ,null 
        ,[32,12],[33,15],[34,19] 

        ,null 
        ,[38,6],[39,7],[40,8] 
        ,null 
        ,[42,12],[43,15],[44,19] 

        ,null 
        ,[40,6],[41,7],[42,8] 
        ,null 
        ,[44,12],[45,15],[46,19] 

        ,null 
        ,[42,6],[43,7],[44,8] 
        ,null 
        ,[46,12],[47,15],[48,19] 

        ,null 
        ,[42,4],[45,5],[47,8] 
        ,null 
        ,[53,12],[54,13],[55,14] 
        ], 
      color: 'green' 
     }] 
    }); 
}); 

}）;

有關如何使這些標記重新出現的任何想法？

在此先感謝。

更新26/02：
我一直在測試其他情況，以確定這個問題的原因，這裏是我發現了什麼：
- 當線條太接近對方時發生該問題（上xAxis）
- 縮放並沒有幫助，即使是放大了標記應該出現的地方也沒有出現。 舉一個例子，你可以看到錯誤試圖徘徊在[47,15]綠色系列點時： -
每當y的值都相同或不

UPDATE 25/04出現問題。而不是[47,15]點，它是「徘徊」的[47,8]點，無論我嘗試什麼（如完全放大），我都不能「懸停」[47,15]點。

我已經更新了jsfiddle鏈接和上面的代碼，以更多的例子來說明問題。

任何人有任何想法解決這個問題？

Answer 1

的問題是，在Highcharts一個系列數據應該X軸進行排序上升，而你的系列都沒有。排序你的數據，並應該工作。

Answer 2

我會假設你實際上並沒有談論標誌，因爲這些被設置爲

plotOptions： { 行：{ 標記： { 啓用：假的， }} } ，

在你的例子中。如果您想顯示標記，則需要將其更改爲啓用：true。

您可能正在討論工具提示。

你需要做的是改變你的代碼：

tooltip: { 
    shared: true, 
    formatter: function() { 
     var s = '<b>' + this.x + '</b>'; 

     $.each(this.points, function (i, point) { 
      s += '<br/>' + point.series.name + ': ' + point.y + 'm'; 
     }); 

     return s; 
    }, 
}, 

看到這些文檔條目和小提琴：

http://api.highcharts.com/highcharts#tooltip.shared

http://api.highcharts.com/highcharts#tooltip.formatter

http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/tooltip/formatter-shared/

Answer 3

的Bug我都不n highcharts，也不在你的程序中。問題在於某些標記隱藏在其他標記之後。 查看http://jsfiddle.net/msjaiswal/KYXQS/10/ 您會注意到，在綠色和藍色線條的連接點上，藍色標記隱藏在綠色標記的後面。嘗試從圖例中取消選擇綠色系列，並顯示隱藏的藍色標記。

啓用圖表選項標記是這樣的：

  line : { 
       marker : 
       { 
        enabled: true, 
       } 
      }