Chart.js Y轴最小值设为0但无需始终显示的优化需求

要实现Y轴下限不低于0，同时避免折线紧贴图表顶部，你可以通过计算数据集最小值结合Chart.js的min和suggestedMin配置来实现：

核心思路 #

• 设置min: 0强制Y轴下限不低于0
• 计算所有数据集的最小值，用suggestedMin让Chart.js基于这个最小值生成更贴近数据的刻度（当最小值大于0时，Y轴刻度会围绕最小值展开；如果最小值≤0，则自动用0作为下限）
• 可选：给最小值加一点缓冲（比如乘以0.9），让折线和图表边缘保留少量间距

修改后的代码 #

// 计算所有数据集的全局最小值
const getMinValue = (data) => {
  let min = Infinity;
  data.datasets.forEach(dataset => {
    const datasetMin = Math.min(...dataset.data);
    if (datasetMin < min) {
      min = datasetMin;
    }
  });
  return min;
};

const yMin = getMinValue(data);
// 添加10%缓冲，避免折线紧贴边缘，同时确保不低于0
const suggestedMin = Math.max(0, yMin * 0.9);

new Chart(ctx, {
  type: 'line',
  data: data,
  options: {
    elements: {
      line: {
        tension: 0.4
      },
    },
    scales: {
      x: {
        grid: {
          display: false
        }
      },
      y: {
        min: 0, // 强制Y轴下限不低于0
        suggestedMin: suggestedMin, // 让刻度贴近数据最小值
        ticks: {
          maxTicksLimit: 25,
          autoSkip: true,
          callback: function(value) {
            if (value % 1 === 0 && value >= 0) {
              return value;
            }
          }
        },
      }
    }
  },
});

说明 #

• getMinValue函数遍历所有数据集，找出全局最小数值
• suggestedMin取最小值的90%（但不低于0），既保证刻度贴近数据，又给折线留了呼吸空间
• min: 0确保即使数据集包含负数或0，Y轴也不会显示负刻度

这样配置后，当数据是数千/数万级时，Y轴会从接近数据最小值的位置开始，折线不会紧贴顶部；如果数据中有0或负数，Y轴下限自动锁定为0。

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