如何移除ChartJS特定刻度并重新排列图表以保持刻度间距一致？

我是ChartJS新手，正在调整图表。已通过callback函数移除了Y轴的特定刻度（20和25），但剩余刻度之间存在空白，希望重新排列图表，使各刻度间的宽度保持一致。

解决思路 #

你现在的问题是：用ticks.callback只是隐藏了刻度，但ChartJS仍然会为这些被隐藏的刻度预留空间，导致剩余刻度间距不一致。要解决这个，需要直接替换Y轴的原始刻度数组，不让ChartJS生成那些不需要的刻度。

具体做法是利用afterBuildTicks钩子，直接返回你需要显示的刻度值，这样ChartJS会基于这些刻度渲染，不会预留多余空间。

修改后的完整代码 #

JavaScript #

var data = [{
  x: 0,
  y: 10
}, {
  x: 2,
  y: 10
}, {
  x: 6,
  y: 10
}, {
  x: 10,
  y: 50
}];

var labels_x = [1.6666666666666665, 9.666666666666666, 17.666666666666668, 25.666666666666668, 33.666666666666664, 41.666666666666664, 49.666666666666664, 57.666666666666664];
var labels = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', 'Mon'];

var options = {
  type: 'line',
  data: {
    datasets: [{
      data: data
    }]
  },
  options: {
    scales: {
      yAxes: [{
        ticks: {
          min: 0,
          max: 50,
          // 确保只显示指定刻度
          callback(value) {
            const allowedTicks = [0, 10, 30, 40, 50];
            return allowedTicks.includes(value) ? value : null;
          },
          stepSize: 10 // 保证刻度间隔一致
        },
        afterBuildTicks(scale) {
          // 替换原始刻度为自定义列表
          scale.ticks = [0, 10, 30, 40, 50];
          return scale.ticks;
        }
      }],
      xAxes: [{
        type: 'linear',
        ticks: {
          min: 0,
          max: 61,
          autoSkip: false,
          callback(value, index) {
            return labels[index];
          }
        },
        afterBuildTicks(scale) {
          scale.ticks = labels_x;
          return scale.ticks;
        }
      }]
    }
  }
};

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);

CSS #

canvas {
  background-color: #eee;
}

HTML #

<body>
  <canvas id="chartJSContainer" width="600" height="300"></canvas>
</body>

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>

关键修改点 #

1. Y轴afterBuildTicks钩子：直接替换刻度数组为你需要显示的刻度，彻底移除不需要的20、25刻度，避免预留空间。
2. stepSize配置：保证剩余刻度之间的间隔一致，让图表布局更规整。
3. ticks.callback验证：双重确保只显示指定的刻度值，防止意外生成多余刻度。

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