请教：如何在Highcharts的xAxis下方添加一条线？

有两种常用方案可以实现这个需求，具体如下：

方案一：使用Renderer手动绘制线条 #

通过Highcharts的renderer.path()方法，在图表加载和重绘时手动绘制线条，能精准控制位置和样式：

// 定义绘制线条的函数
function drawBottomLine() {
  const chart = this;
  const xAxis = chart.xAxis[0];
  // 获取x轴左右端点的x坐标，以及线条的y坐标（距离x轴底部20px，可调整）
  const xStart = xAxis.left;
  const xEnd = xAxis.left + xAxis.width;
  const lineY = chart.plotTop + chart.plotHeight + 20;

  // 绘制线条并保存引用，方便重绘时销毁
  chart.customBottomLine = chart.renderer.path(['M', xStart, lineY, 'L', xEnd, lineY])
    .attr({
      'stroke': '#000', // 线条颜色
      'stroke-width': 2 // 线条宽度
    })
    .add();
}

// 初始化图表
Highcharts.chart('container', {
  xAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
  },
  series: [{
    data: [1, 3, 2, 4, 5, 6]
  }],
  chart: {
    events: {
      load: drawBottomLine,
      redraw: function() {
        // 重绘时先移除旧线条，避免重复绘制
        if (this.customBottomLine) {
          this.customBottomLine.destroy();
        }
        drawBottomLine.call(this);
      }
    }
  }
});

方案二：使用Annotations配置（推荐） #

利用Highcharts的Annotations功能，通过配置项实现，无需手动处理重绘逻辑，更符合框架的配置式开发：

Highcharts.chart('container', {
  xAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
  },
  series: [{
    data: [1, 3, 2, 4, 5, 6]
  }],
  annotations: [{
    shapes: [{
      type: 'path',
      // 动态计算线条路径
      path: function() {
        const chart = this.chart;
        const xAxis = chart.xAxis[0];
        const xStart = xAxis.left;
        const xEnd = xAxis.left + xAxis.width;
        const lineY = chart.plotTop + chart.plotHeight + 20;
        return [`M${xStart} ${lineY} L${xEnd} ${lineY}`];
      },
      stroke: '#000',
      strokeWidth: 2
    }]
  }]
});

注意事项 #

• 调整lineY变量中的20可以改变线条与x轴底部的垂直间距，根据视觉需求修改即可。
• 如果使用Renderer方案，必须处理redraw事件，否则窗口大小变化或图表更新后线条位置会错位。

内容的提问来源于stack exchange，提问作者박현근