ChartJS v4 Y轴无法从0起始的问题求助

核心修复方案 #

你的配置语法本身是正确的，导致Y轴min: 0不生效的常见原因是脚本执行时机过早（DOM元素尚未加载完成），或者存在全局配置覆盖。可以按以下步骤修复：

1. 确保脚本在DOM加载完成后执行
   将Chart初始化代码包裹在DOMContentLoaded事件监听中，避免在canvas元素未渲染时执行：

   document.addEventListener('DOMContentLoaded', function() {
       new Chart(document.getElementById("line-chart"), {
           type : 'line',
           data : {
               labels : ['22:08', '22:08', '17:27', '19:39', '19:45', '19:49', '19:49', '19:49', '19:50', '19:54'],
               datasets : [
                       {
                           data : [23.5, 23.5, 23.5, 23.5, 23.5, 25.8125, 25.8125, 25.8125, 25.8125, 25.875],
                           label : "Temperature",
                           borderColor : "#3cba9f",
                           fill : false
                       }]
           },
           options : {
               scales: {
                       y: { 
                           min: 0,
                           max: 100
                       } 
                   },    
               title : {
                   display : true,
                   text : 'Elderberry Brew Temperature Over Time'
               }
           }
       });
   });
   

2. 检查全局配置覆盖
   如果项目中存在Chart.defaults全局配置（比如全局设置了Y轴的min或beginAtZero），会覆盖实例配置。可以在初始化前临时重置全局Y轴配置：

   // 临时重置全局Y轴配置（可选）
   Chart.defaults.scales.y.min = undefined;
   

3. 验证元素ID与DOM结构
   确认页面中存在ID为line-chart的<canvas>元素，且无重复ID导致获取错误元素。

4. 清除浏览器缓存
   强制刷新页面（Ctrl+F5），确保加载最新的脚本和Chart.js v4.4.0资源，避免缓存的旧代码干扰配置生效。

额外排查步骤 #

• 打开浏览器控制台（F12），查看是否有Chart.js初始化相关报错（比如元素不存在、语法错误）。
• 尝试简化配置，只保留scales.y.min: 0，排除其他选项干扰验证是否生效。

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