Highchartsで時系列を前面に表示

Question

私は多くの時系列、ほぼ400の線図を持っています。必然的にそれらの一部はバックグラウンドで終了します。私は時系列を青で強調表示するコードを実験していて、マウスがその上に乗ったときに前面に表示します。色の変更は機能しますが、シリーズをフォアグラウンドにすることはできません。

function mouseOverCallback(event, series) { 
    series.graph.attr('stroke', 'steelblue') 
    series.graph.toFront() 
} 

function mouseOutCallback(event, series) { 
    series.graph.attr('stroke', 'lightgray') 
} 

Highcharts.chart('container', { 
    xAxis: { 
     categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] 
    }, 

    plotOptions: { 
     series: { 
      stickyTracking: false, 
      events: { 
       mouseOver: function (e) { 
        mouseOverCallback(e, this) 
       }, 
       mouseOut: function (e) { 
        mouseOutCallback(e, this) 
       } 
      } 
     } 
    }, 

    series: [ 
     { 
      data: [48.85, 60.45, 115.44, 108.24, 134.0, 156.0, 155.6, 128.5, 206.4, 164.1, 55.6, 94.4], 
      color: 'lightgray' 
     }, 
     { 
      data: [49.9, 61.5, 116.4, 109.2, 134.0, 156.0, 105.6, 108.5, 206.4, 164.1, 55.6, 94.4], 
      color: 'lightgray' 
     } 
    ] 
}); 

私はcreated a JSFiddle私が解決しようとしている問題を再現する：ここで

は、問題を再現するコード断片です。最初のシリーズが分岐した後にマウスを置くと、2番目のシリーズがまだ灰色で表示されていることがわかります。

このサンプルコードを修正してこの問題を解決するにはどうすればよいですか？

Answer 1

私が変わったときにそれは私のために働い

：

function mouseOverCallback(event, series) { 
    series.graph.attr('stroke', 'steelblue') 
    series.graph.toFront() 
} 

function mouseOverCallback(event, series) { 
    series.graph.attr('stroke', 'steelblue') 
    series.group.toFront(); 
} 

へ

Answer 2

mouseOverとmouseOutには、zIndexのシリーズを単純に更新することができます。例えば

（JSFiddle）：

plotOptions: { 
    series: { 
     stickyTracking: false, 
     events: { 
      mouseOver: function (e) { 
       e.target.update({ zIndex: 1000 }); 
       mouseOverCallback(e, this) 
      }, 
      mouseOut: function (e) { 
       e.target.update({ zIndex: undefined }); 
       mouseOutCallback(e, this) 
      } 
     } 
    } 
}