Question

遇到在折线图中突出显示标签的问题。

我在这里找到了类似的主题PDOStatement::fetch()，但它不合适（在这种情况下没有找到有关xAxis [0] .labelGroup的任何信息）。此外，文档中没有任何信息

我需要什么： Bold X-Axis Label on Point Hover in Highcharts Column Chart

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

我的例子：

我试图使用：

 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的对象，该对象中的刻度由其在轴上的值标识。 tick对象的一部分是您要设置样式的标签。

所以你需要找到足够接近的＆＃39;勾选悬停点。这些点与刻度线的值不完全相同，因此您需要定义满足您的距离。

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,

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

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

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

1 个答案: