Highcharts曲线图 - 突出显示点悬停上的xAxis标签

Question

面对突出显示折线图中标签的问题。

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

没有信息，我需要什么：点上悬停效果的X轴

选中的标签，并应突出最接近的一个。轴的类型是日期时间，间隔为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

轴非常感谢保持对象称为蜱和该对象内的蜱通过其在轴线值来标识。刻度对象的部分是您想要设计的标签。

因此，您需要找到徘徊点的“足够接近”刻度。 点与滴答的值并不完全相同，所以您需要定义满足您的距离。

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

活动的，将采取适当的行动要点：如果你想使用CSS样式

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; 
     } 
     } 
    } 

最后一件事，那么你必须支持HTML标签。

labels: { 
    useHTML: true, 

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

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