在Highcharts中將時間序列帶到前面

我有一個包含很多時間序列的線形圖，有近400個。不可避免地，其中一些會在後臺出現。我正在嘗試使用代碼來突出顯示藍色時間序列，並在鼠標懸停在其上時將其放在前面。顏色的變化是有效的，但是把這個系列放到前臺卻不行。在Highcharts中將時間序列帶到前面

下面是一個代碼片段重現問題：

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重現我試圖解決這個問題。如果你在第一個系列出現偏差後盤旋，你可以看到第二個系列，灰色留下，仍然在它的前面，並遮住它。

如何修改此示例代碼來解決此問題？

來源

2017-03-07 Btz

它的工作對我來說，當我改變：

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

到

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

來源

2017-03-07 18:01:35 ChrisThompson

您可以試着簡單地更新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) 
      } 
     } 
    } 
}

來源

2017-03-07 17:57:13

在Highcharts中將時間序列帶到前面

回答

相關問題