如何向Chart.js传入自定义ticks数组？

完全可以实现传入自定义ticks数组的需求，不需要引入第三方插件，根据使用的Chart.js版本选择对应方案即可：

• v3、v4（当前主流维护版本）：官方原生支持直接传入自定义刻度数组，配置项为对应轴下的ticks.values，配置后会直接覆盖默认的自动刻度计算逻辑，不需要额外写回调处理。
  配置示例：

  new Chart(document.getElementById('myChart'), {
    type: 'bar',
    data: chartData,
    options: {
      scales: {
        y: {
          ticks: {
            // 直接替换为你需要的自定义刻度数组
            values: [0, 25, 50, 75, 100, 200]
          }
        }
      }
    }
  });
  

• v2及更早的旧版本无原生ticks.values配置项，可以通过afterBuildTicks钩子替换自动生成的刻度列表，配合ticks.callback控制刻度文本展示：
  配置示例：

  const myCustomTicks = [0, 25, 50, 75, 100, 200];
  new Chart(document.getElementById('myChart'), {
    type: 'bar',
    data: chartData,
    options: {
      scales: {
        yAxes: [{
          ticks: {
            min: Math.min(...myCustomTicks),
            max: Math.max(...myCustomTicks)
          },
          afterBuildTicks: function(scale) {
            // 替换自动生成的刻度为自定义数组
            scale.ticks = myCustomTicks.map(val => ({value: val}));
          }
        }]
      }
    }
  });
  

注意：如果自定义刻度的数值范围和实际图表数据的范围不匹配，记得同步配置对应轴的min、max参数，避免数据点被图表可视区域裁剪。

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