解决ChartJS线性X轴倒数第二条网格线缺失问题

问题分析 #

当前X轴配置下，14.0（对应14000）位置的网格线缺失，同时需要隐藏接近数据最大值（14539.7）的14.5（对应14500）刻度及网格线，且保留X轴宽度适配数据范围的特性。

配置修改方案 #

通过强制刻度间隔、过滤刻度标签、控制网格线绘制三个维度调整配置：

{
  scales: {
    x: {
      type: 'linear',
      bounds: 'data', // 保留轴宽度适配数据范围的特性
      min: 0, // 确保X轴从0起始
      ticks: {
        stepSize: 1000, // 强制刻度间隔为1000，对应显示0.0、1.0...14.0
        autoSkip: false, // 禁止自动跳过刻度，确保所有标准位置刻度都显示
        callback: (value) => {
          // 隐藏接近最大值的14500对应刻度标签
          if (value >= 14500) return '';
          return (value / 1000).toFixed(1);
        }
      },
      grid: {
        // 仅绘制小于14500的网格线
        drawOnChartArea: (context) => context.tick.value < 14500,
        // 隐藏14500对应刻度线
        tickLength: (context) => context.tick.value >= 14500 ? 0 : undefined
      }
    }
  }
}

关键配置说明 #

• stepSize: 1000：强制生成间隔为1000的刻度，确保14000（14.0）位置的刻度和网格线被包含在内。
• autoSkip: false：关闭ChartJS自动跳过刻度的逻辑，避免14.0位置的刻度被遗漏。
• ticks.callback：过滤掉14500及以上的刻度标签，实现隐藏最大值对应标签的需求。
• grid.drawOnChartArea 和 tickLength：分别控制网格线和刻度线的显示，确保14500位置的网格线和刻度线不被渲染。

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