Chart.js折线图Y轴动态变化：如何固定Y轴范围为0-100

问题说明 #

实现CPU使用率管理后台仪表盘时，需要将折线图Y轴固定在0-100（百分比）范围，但当前Chart.js的Y轴会随数据动态变化，无法保持静态范围。

问题原因 #

你将min、max配置在了ticks对象内，而Chart.js中Y轴的范围控制参数需要直接定义在轴对象（y）下；同时suggestedMax的设置会覆盖固定范围的配置，导致Y轴仍会动态调整。

修复后的代码 #

JavaScript代码 #

new Chart(document.querySelector('#lineChart'), {
  type: 'line',
  data: {
    labels: ['一月', '二月', '三月', '四月', '五月', '六月', '七月'],
    datasets: [{
      label: 'CPU使用率',
      data: [20, 30, 80, 15, 5, 4, 55],
      fill: true,
      borderColor: 'rgb(75, 192, 192)',
      tension: 0.1
    }]
  },
  options: {
    scales: {
      y: {
        type: 'linear',
        min: 0, // 直接在y轴根配置下设置最小值
        max: 100, // 直接在y轴根配置下设置最大值
        ticks: {
          beginAtZero: true,
          stepSize: 20 // 自定义刻度步长
        },
      }
    }
  }
});

HTML代码 #

<canvas id="lineChart" style="max-height: 400px; display: block; box-sizing: border-box;" width="469" height="234"></canvas>

关键修改点 #

• 将min和max从ticks对象移到y轴的根配置层级
• 移除会干扰固定范围的suggestedMax配置

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