如何确保图表Y轴始终从0开始并隐藏负数值？

要确保Y轴最低值始终固定为0且不显示负数值，你需要调整两个核心部分：强制Y轴刻度范围和处理负数据点，以下是具体实现：

1. 强制Y轴最小值固定为0 #

当前代码中的suggestedMin: 0仅为建议值，当数据包含负数时，Chart.js会自动扩展Y轴范围适配数据。要彻底固定最小值为0，需将suggestedMin替换为min: 0——这个配置会强制Y轴下限锁定在0，不受数据范围影响。

2. 处理负数值（二选一即可） #

方式一：预处理数据（推荐） #

在将传感器数据传入图表前，过滤掉负数或把负数替换为0，从根源上避免负数据点出现：

// 假设你的原始传感器数据存在rawSensorData变量中
const processedData = rawSensorData.map(value => Math.max(value, 0));

方式二：刻度回调隐藏负刻度 #

如果不想修改原始数据，可以通过刻度回调函数让Y轴不显示负刻度值，同时Chart.js会自动将负数据点截断在Y轴0线位置：

ticks: {
    callback: function(value) {
        return value >= 0 ? value : '';
    }
}

修改后的完整代码 #

适配Chart.js v3+版本（当前主流版本） #

var fireCtx = document.getElementById('fireNumberChart').getContext('2d');

// 预处理数据，将负数转为0
const rawSensorData = []; // 你的原始传感器数据
const processedData = rawSensorData.map(value => Math.max(value, 0));

var fireChart = new Chart(fireCtx, {
    type: 'line',
    data: {
        labels: [], // 填入你的标签数组
        datasets: [{
            label: 'Sensor Value',
            data: processedData,
            backgroundColor: 'rgba(54, 162, 235, 0.2)',
            borderColor: 'rgba(54, 162, 235, 1)',
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            y: {
                ticks: {
                    min: 0, // 强制Y轴最小值为0
                    precision: 0, // 仅显示整数刻度
                    callback: function(value) {
                        return value >= 0 ? value : ''; // 隐藏负刻度
                    }
                },
                beginAtZero: true
            }
        }
    }
});

适配Chart.js v2版本 #

如果你仍在使用v2版本，只需调整scales的结构为数组形式：

options: {
    scales: {
        yAxes: [{
            ticks: {
                min: 0,
                precision: 0,
                callback: function(value) {
                    return value >= 0 ? value : '';
                }
            },
            beginAtZero: true
        }]
    }
}

关键说明 #

• min: 0是实现Y轴固定下限的核心配置，优先级高于数据的自然范围；
• 预处理数据能确保图表上的所有数据点都不会低于0，视觉效果更统一；
• 刻度回调作为兜底方案，防止意外出现的负刻度破坏布局。

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