Chart.js如何让0刻度位于画布底部

直接给你两个可行的解决方案：

方案一：通过钩子强制设置刻度范围 #

在y轴配置里添加beforeBuildTicks钩子，判断所有数据是否为0，是的话手动设置max值，避免图表自动扩展负刻度：

const myChart = new Chart(document.getElementById('myChart'), {
  type: 'line',
  data: {
    labels: ['数据1', '数据2', '数据3'],
    datasets: [{
      label: '我的数据',
      data: [0, 0, 0],
      borderColor: '#36A2EB',
      tension: 0.1
    }]
  },
  options: {
    scales: {
      y: {
        beginAtZero: true,
        min: 0,
        beforeBuildTicks: function(axis) {
          // 检查所有刻度值是否都是0
          const allDataZero = axis.ticks.every(tick => tick.value === 0);
          if (allDataZero) {
            axis.max = 1; // 自定义一个最小的非0最大值，保证折线在底部
          }
        }
      }
    }
  }
});

方案二：使用suggestedMax参数 #

给y轴设置suggestedMax为一个小数值，当全0数据时，图表会以0到这个值为范围；当有非0数据时，该参数会自动失效，不影响正常缩放：

const myChart = new Chart(document.getElementById('myChart'), {
  type: 'line',
  data: {
    labels: ['数据1', '数据2', '数据3'],
    datasets: [{
      label: '我的数据',
      data: [0, 0, 0],
      borderColor: '#36A2EB',
      tension: 0.1
    }]
  },
  options: {
    scales: {
      y: {
        beginAtZero: true,
        min: 0,
        suggestedMax: 1
      }
    }
  }
});

原理说明 #

当所有数据都是0时，Chart.js会默认扩展y轴范围来让图表“有空间”，导致出现负刻度且折线居中。通过强制设置max或用suggestedMax限定最小范围，就能让折线固定在底部的0刻度位置，同时不影响非0数据时的正常显示。

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