在 Highcharts 中将时间序列放在首位答案

【问题标题】：Bringing a time series to the front in Highcharts在 Highcharts 中将时间序列放在首位
【发布时间】：2017-03-07 17:10:28
【问题描述】：

我有一个包含许多时间序列的折线图，将近 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 重现我试图解决的问题。如果您在它们分歧后将鼠标悬停在第一个系列上，您会看到第二个系列（以灰色显示）仍然绘制在它的前面，并且遮住了它。

如何修改此示例代码以解决此问题？

【问题讨论】：

标签： javascript html highcharts

【解决方案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();
}

【讨论】：

【解决方案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)
            }
        }
    }
}

【讨论】：