如何修复Highcharts轴标签包裹div添加自定义ID后的格式异常问题

当前图表效果如下：

我需要实现用户悬停在X轴标签上时显示tooltip的效果，因此对标签做了如下格式化配置：

labels: { useHTML: true, formatter: function() { return '<div id="label_'+this.value.replace(/ /g,'') +'">'+this.value+'</div>'; } }

但运行后图表显示效果变为：

请问如何在为每个标签添加自定义ID的同时，保留Highcharts原生的格式样式？

问题原因 #

你直接自定义formatter返回纯div结构时，相当于完全覆盖了Highcharts原本为X轴标签自动添加的内置样式类、行内样式（比如倾斜角度、边距、对齐规则、字体属性等），所以才会出现样式错乱的情况。

实现方法 #

方法1：修改formatter逻辑，保留原生样式继承 #

不需要完全重写返回内容，先调用Highcharts默认的标签格式化方法拿到原生输出内容，再给自定义div添加适配样式即可：

labels: {
  useHTML: true,
  formatter: function() {
    // 调用原生格式化方法获取默认文本
    const originContent = this.axis.defaultLabelFormatter.call(this);
    // 给自定义div设置行内块属性，继承父级标签的样式
    return `<div id="label_${this.value.replace(/ /g,'')}" style="display: inline-block; margin: 0; padding: 0">${originContent}</div>`;
  }
}

该方法改动成本低，仅需新增少量代码即可保留原生样式效果。

方法2：渲染后动态添加ID，完全不改动原生渲染逻辑 #

如果不想调整formatter配置，可以在图表渲染完成的回调事件中，直接给已生成的标签元素添加ID，原生样式100%保留：

Highcharts.chart('container', {
  // 其余原有图表配置保持不变
  xAxis: {
    // 原有X轴配置无需调整，不用修改labels属性
  },
  chart: {
    events: {
      render: function() {
        const xAxis = this.xAxis[0];
        // 遍历所有X轴刻度对应的标签
        xAxis.tickPositions.forEach(pos => {
          const tick = xAxis.ticks[pos];
          if (tick && tick.label) {
            const labelValue = tick.label.textStr.replace(/ /g, '');
            // 直接给原生标签元素添加自定义ID
            tick.label.element.setAttribute('id', `label_${labelValue}`);
          }
        });
      }
    }
  }
});

该方案适配性更高，不会对Highcharts的原生渲染逻辑产生任何影响，也不会出现样式冲突问题。

内容的提问来源于stack exchange，提问作者droft1312