Chart.js v2.9.4如何在最高柱形上方额外添加刻度（实现grace效果）

解决方案 #

Chart.js v2.9.4 版本没有内置 grace 配置项，你可以通过手动指定Y轴最大值的方式实现需求，有两种可选方案：

方案1：固定最大值（适配你当前的示例场景） #

直接在Y轴配置中添加 max 属性，设置为你需要的上限值30即可，修改你的 barChartOptions 中 yAxes 部分的代码：

yAxes: [
  {
    max: 30, // 新增这一行即可
    ticks: {
      beginAtZero: true,
      min: 0,
      stepSize: 5,
      fontColor: '#ABACB3',
    },
    gridLines: {
      display: true,
      borderDash: [4, 4],
      color: '#EEEDFB',
      drawBorder: false,
    },
  }
]

方案2：动态适配数据（适用于数据动态变化的场景） #

如果你的柱形数据是动态获取的，可以先计算所有数据的最大值，再根据步长自动生成适配的上限值，避免每次手动修改：

1. 新增方法处理最大值计算：

methods: {
  getYMax() {
    // 取出所有数据集的最大值
    const maxVal = Math.max(...this.barChartData.datasets[0].data)
    const stepSize = 5
    // 向上取到步长的整数倍后再加一个步长，保证多一个刻度
    return Math.ceil(maxVal / stepSize) * stepSize + stepSize
  }
}

2. 把Y轴的max配置绑定为上面方法的返回值即可：

yAxes: [
  {
    max: this.getYMax(),
    // 其余原有配置保持不变
  }
]

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