如何在 Chart.js 上管理 Y 轴？

【问题标题】：How to manage Y-axis on Chart.js?如何在 Chart.js 上管理 Y 轴？
【发布时间】：2022-11-13 16:37:11
【问题描述】：

我正在使用 Chart.js 并想管理我的 Y 轴。它应该如下所示：

间隔应该是 15 步，它应该始终显示最大值 - 45（即使来自 X 轴的数据更少）。

我正在尝试这个：

options: {
    scales: {
        yAxes: [{
            display: true,
            ticks: {
                maxTicksLimit: 45,
                stepSize: 15,
            }
        }]
    },
}

它对我不起作用：间隔不是 15，而是 2，最大 Y 轴值取决于 X 轴数据 - 如果数据为 30，则最大 Y 轴值为 30。

我怎么能解决这个问题？谢谢！

【问题讨论】：

标签： vue.js chart.js

【解决方案1】：

如果您打开浏览器的开发工具，在控制台中您可能会看到以下错误：

刻度的刻度配置无效：yAxes

至少这是我在尝试使用 options 对象时看到的。这告诉我们，我们没有正确编写 scales 属性。查看 chart.js 文档，我们看到 scales 始终是一个对象，而不是对象数组。同样根据您的要求，听起来您想设置max 而不是maxTicksLimit，这意味着您应该编写一个像这样的选项对象：
options: {
  scales: {
    yAxes: {
      display: true,
      max: 45,
      ticks: {
        stepSize: 15
      }
    }
  }
}

【讨论】：