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重现我正在努力解决的问题。如果你将它们分开后悬停在第一个系列上，你可以看到第二个系列（灰色）仍然在它前面绘制，并遮挡它。

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

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

您可以尝试在zIndex和mouseOver上更新系列的mouseOut。

例如（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)
            }
        }
    }
}

在Highcharts中将时间序列带到前面

2 个答案: