在 Chart.js v4 中，min: 0 不再能可靠地使 Y 轴起点归零；必须使用 beginAtZero: true 才能确保数值轴（如 y 轴）严格从 0 开始，尤其适用于温度、计数等非负量图表。
在 chart.js v4 中，`min: 0` 不再能可靠地使 y 轴起点归零；必须使用 `beginatzero: true` 才能确保数值轴（如 y 轴）严格从 0 开始，尤其适用于温度、计数等非负量图表。
Chart.js v4 对坐标轴配置进行了重构，其中 y 轴（以及 x 轴，若为数值型）属于数值标尺（linear），其默认行为是根据数据范围自动缩放，而非强制包含零点。即使显式设置 min: 0，当所有数据均远大于 0（如你的温度数据集中在 23.5–25.8）时，Chart.js v4 可能仍会忽略该限制以优化视觉比例——这是与 v2/v3 的关键差异。
✅ 正确解法：启用 beginAtZero: true
该选项强制标尺始终包含 0，并将 min 自动设为 0（即使你同时设置了 min: 5，beginAtZero: true 也会优先覆盖）。它专为数值型标尺设计，语义清晰且稳定可靠。
以下是修正后的完整配置示例（精简可复用版）：
<canvas id="line-chart" width="800" height="400"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js@4/dist/chart.umd.min.js"></script>
<script>
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 (°C)",
borderColor: "#3cba9f",
fill: false,
tension: 0.3 // 可选：让曲线更平滑
}]
},
options: {
scales: {
y: {
beginAtZero: true, // ✅ 核心配置：强制 Y 轴从 0 开始
max: 100, // 可选：上限仍可手动设定
title: {
display: true,
text: 'Temperature (°C)'
}
},
x: {
title: {
display: true,
text: 'Time'
}
}
},
plugins: {
title: {
display: true,
text: 'Elderberry Brew Temperature Over Time',
font: { size: 16 }
}
}
}
});
</script>⚠️ 注意事项：
- beginAtZero: true 仅对 linear、logarithmic 等数值标尺生效；时间轴（time）或类别轴（category）不支持该属性。
- 若需自定义 0 点样式（如加粗横线），可通过 grid.drawOnChartArea: true 配合 ticks.stepSize 或插件实现，但 beginAtZero 本身已解决“起点归零”这一核心诉求。
- 避免混用 min: 0 和 beginAtZero: true —— 后者已隐含前者，冗余配置无益且可能引发调试困惑。
总结：Chart.js v4 中，beginAtZero: true 是控制数值轴起始点的权威方式。它语义明确、兼容性强，且完全适配你的温度监控场景——即使数据波动微小，Y 轴也将稳固锚定于 0，确保趋势解读不失真。
