Chart.js 配置选项不生效，Y轴无法从0开始求助

核心修改方案 #

要强制Y轴起始值为0，需调整配置并解决重复实例创建的干扰问题：

1. 强制锁定Y轴最小值 #

直接设置min: 0替代仅依赖beginAtZero（后者会因数据包含负数或特殊值失效），配置示例：

options: {
  scales: {
    y: {
      beginAtZero: true,
      min: 0, // 强制Y轴最小值固定为0
      stepSize: 1
    },
    x: {
      display: true
    }
  }
}

2. 销毁旧图表实例 #

每次调用updateChart时，若已有对应ID的图表实例，需先销毁再重建，避免旧配置覆盖新设置：

// 全局存储图表实例，用于后续销毁
const chartInstances = {};

function updateChart(labels, data, id, datasetLbl) {
  let date = moment().format('YYYY/MM/DD');
  
  const ctx = document.getElementById(id).getContext('2d');
  
  // 销毁已有实例
  if (chartInstances[id]) {
    chartInstances[id].destroy();
  }
  
  // 创建新图表
  chartInstances[id] = new Chart(ctx, {
    type: 'line',
    data: {
      labels: labels.length < 1 ? [date] : labels,
      datasets: [{
        label: datasetLbl,
        data: data.length === 0 ? [0] : data,
        borderColor: 'rgb(75, 192, 192)',
        tension: 0.1
      }]
    },
    options: {
      scales: {
        y: {
          beginAtZero: true,
          min: 0,
          stepSize: 1
        },
        x: {
          display: true
        }
      }
    }
  });
}

排查要点 #

• 检查data数组是否包含负数或NaN：若数据存在负数，beginAtZero会自动失效，但min:0仍会强制Y轴从0开始（负数数据点会被截断在Y轴下方）。
• 确认无第三方插件干扰：部分Chart.js插件会自动调整轴范围，可暂时禁用插件测试。
• 验证CDN版本：Chart.js 4.x版本的轴配置语法与3.x一致，无需调整层级结构。

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