如何在Highcharts.js中将X轴刻度标签置于刻度之间

我的图表X轴当前配置代码如下：

xAxis: {
    type: 'datetime',
    startOnTick: true,
    labels: {
      useHTML: true,
      align: 'center',
      rotation: 0,
      style: { fontSize: "10px" },
      formatter: function () {
        var date = new Date(this.value);
        var quarter = Math.floor((date.getUTCMonth()) / 3) + 1;
        var year = date.getUTCFullYear().toString().substr(-2);
        return 'Q' + quarter + '-' + year;
      }
    },
    minPadding: 0.05, 
    maxPadding: 0.05
  },

当前X轴显示效果：

期望的X轴显示效果：

请问怎么把这些刻度标签放到两个刻度之间，而不是刻度正下方？麻烦各位了。

解决方案 #

要实现标签在刻度之间的效果，你可以通过两种方式实现：

方法1：固定偏移量（快速上手）

直接在xAxis.labels中添加x属性，设置一个像素偏移值，让标签从当前刻度位置移到两个刻度的中间。数值需要根据你的图表宽度和刻度数量调整，比如：

xAxis: {
    type: 'datetime',
    startOnTick: true,
    labels: {
      useHTML: true,
      align: 'center',
      rotation: 0,
      style: { fontSize: "10px" },
      x: 25, // 调整这个数值，直到标签处于刻度中间
      formatter: function () {
        var date = new Date(this.value);
        var quarter = Math.floor((date.getUTCMonth()) / 3) + 1;
        var year = date.getUTCFullYear().toString().substr(-2);
        return 'Q' + quarter + '-' + year;
      }
    },
    minPadding: 0.05, 
    maxPadding: 0.05
  },

方法2：动态计算偏移量（自适应图表）

如果需要图表自适应不同尺寸，建议在图表加载时动态计算刻度间的像素间隔，自动设置偏移量：

chart: {
  events: {
    load: function() {
      const xAxis = this.xAxis[0];
      // 获取相邻两个刻度的数值间隔
      const tickValueGap = xAxis.tickPositions[1] - xAxis.tickPositions[0];
      // 转换为像素间隔
      const pixelGap = xAxis.toPixels(tickValueGap) - xAxis.toPixels(0);
      // 偏移半个间隔，让标签居中在两个刻度之间
      xAxis.update({
        labels: {
          x: pixelGap / 2
        }
      });
    }
  }
},
xAxis: {
    type: 'datetime',
    startOnTick: true,
    tickInterval: 3 * 30 * 24 * 3600 * 1000, // 显式设置季度间隔（可选，确保刻度均匀）
    labels: {
      useHTML: true,
      align: 'center',
      rotation: 0,
      style: { fontSize: "10px" },
      formatter: function () {
        var date = new Date(this.value);
        var quarter = Math.floor((date.getUTCMonth()) / 3) + 1;
        var year = date.getUTCFullYear().toString().substr(-2);
        return 'Q' + quarter + '-' + year;
      }
    },
    minPadding: 0.05, 
    maxPadding: 0.05
  },

补充说明

如果你的刻度间隔不是固定的季度，方法2依然适用，它会自动根据当前刻度的实际间隔计算偏移量，确保标签始终处于两个刻度的中间位置。

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