Highcharts：有没有办法在 PointHover 上突出显示系列对应的 y 轴？

Question

我目前在我的图表中使用多个 y 轴，如本例所示：https://jsfiddle.net/3Lsq2nzk/1/。在我的用例中，每个 y 轴只有一行的情况很少见，所以我想知道是否有一种方法可以突出显示与悬停的系列相对应的 y 轴。

因此，如果您存储之前悬停在系列的 y 轴上并重新呈现图表，则此方法有效，但这样做的性能非常糟糕。我还尝试在 onPointHover 中编辑 json，但无济于事。

使用这个 onPointHover 函数：

function onPointHover(e) {
    e.target.color = 'red'
    e.target.series.yAxis.userOptions.labels.style.color = "red"
}

可以更新点颜色，但不能更新 yAxis 颜色，尽管实际 json 正在控制台中更新

Answer 1

您可以通过遍历 series.yAxis.ticks 并更改其 CSS fill 属性轻松实现它。检查下面发布的演示和代码。

代码：

function highlightSeries(series, color) {
  for (var key in series.yAxis.ticks) {
    series.yAxis.ticks[key].label.css({
      fill: color
    });
  }

  series.yAxis.axisTitle.css({
    fill: color
  });
}

...
plotOptions: {
  series: {
    point: {
      events: {
        mouseOver: function() {
          var point = this,
            series = point.series,
            highlightColor = 'red';

          if (point.graphic) {
            point.graphic.attr({
              fill: highlightColor
            });
          }

          series.chart.series.forEach(function(s) {
            if (s.isHighlighted) {
              highlightSeries(s, s.color);
              s.isHighlighted = false;
            }
          });

          highlightSeries(series, highlightColor);
          series.isHighlighted = true;
        }
      }
    }
  }
}

演示：

https://jsfiddle.net/BlackLabel/vs3y0wh5/

API参考：

Highcharts：有没有办法在 PointHover 上突出显示系列对应的 y 轴？

Highcharts: Is there a way to highlight a series' corresponding y-axis onPointHover?

charts

highcharts

reactjs

yaxis