javascript - Highcharts 折线图 - 在点悬停时突出显示 xAxis 标签

Question

遇到折线图中标签高亮问题。

我在这里找到了一个类似的主题 Bold X-Axis Label on Point Hover in Highcharts Column Chart ，但它不合适(在这种情况下没有找到有关 xAxis[0].labelGroup 的任何信息)。文档中也没有信息

我需要:

在点悬停效果上突出显示 xAxis 上的标签，并且它应该突出显示最近的标签。坐标轴类型为日期时间，间隔为6小时

我的例子: https://jsfiddle.net/sjapdya6/

我正在尝试使用:

 mouseOver: function() {
    $($('.customLabel')[this.x]).addClass('customLabelSelected');
 }

添加这些类:

<style>
  .customLabel {
    color: #00FF00;
    background-color: rgba(10, 10, 90, 0.8);
  }
  .customLabelSelected {
    color: #FF0000;
  }
</style>

但它不能正常工作。 有谁知道如何实现这一点？

提前致谢

Answer 1

Axis 包含一个名为 ticks 的对象，该对象中的 ticks 由其在轴上的值标识。刻度对象的部分是您要设置样式的标签。

因此您需要为悬停点找到“足够接近”的标记。 这些点与刻度的值并不完全相同，因此您需要定义满足您的距离。

function findTick(x, ticks, range) {
  for (var tickValue in ticks) {
    if (Math.abs(x - tickValue) <= range) {
      return ticks[tickValue];
    }
  }
}

将采取适当行动的点事件:

events: {
      mouseOver: function(e) {
        var tick = findTick(this.x, this.series.xAxis.ticks, 300000);
        this.selectedTick = tick;

        if (tick) {
          tick.label.css({
            color:'#FF0000'
          });
        }
      },
      mouseOut: function(e) {
        if (this.selectedTick) {
          this.selectedTick.label.css({
            color: '#565f76'
          });
          this.selectedTick = null;
        }
      }
    }

最后，如果你想使用 css 样式，那么你必须启用 html 标签。

   labels: {
    useHTML: true,

否则，您将对样式属性与 html 元素样式不同的 svg 元素进行操作。

示例:https://jsfiddle.net/sjapdya6/1/