Chart.js 2.9.4多轴场景下yScale未定义错误求助

核心错误定位 #

Uncaught TypeError: yScale is undefined 错误的根源是Chart.js 2.9.4（v2.x版本）的配置规则和你当前代码的写法不匹配，尤其是多Y轴、时间轴的配置格式，以及变量初始化的问题。

具体错误点拆解 #

1. Y轴变量初始化错误：你一开始把yAxes定义为对象var yAxes = {};，但后续用了数组的push方法，虽然控制台打印结果看似正常，但类型不匹配会导致Chart.js解析配置时出错。
2. Scales结构不符合v2.x规范：v2.x中多Y轴需要放在scales.yAxes数组里，而你写的scales.y是v3+版本的写法；同理，X轴应该用scales.xAxes而非scales.x。
3. 日期格式处理错误：你把日期格式化成了自定义字符串dd-MM-yy HH:mm，但v2.x的时间轴需要传入可直接解析的时间对象（如原生Date），字符串格式会导致轴解析失败，进而引发yScale未定义的连锁错误。
4. 日期覆盖问题：循环中每次都会重写dates变量，若不同传感器的时间序列长度不一致，会导致数据不匹配。

修复步骤 #

1. 修正Y轴变量初始化 #

将对象改为数组初始化：

var yAxes = [];

2. 调整Scales配置为v2.x格式 #

修改Chart初始化的options.scales部分：

options: {
    responsive: true,
    maintainAspectRatio: false,
    scales: {
        xAxes: [{
            type: 'time',
            time: {
                unit: 'day',
                displayFormats: {
                    day: 'DD-MM-YY HH:mm' // 和你的日期显示需求匹配
                }
            },
            title: {
                display: true,
                text: 'Data'
            }
        }],
        yAxes: yAxes // 直接传入整理好的Y轴配置数组
    }
}

3. 修正日期处理逻辑 #

不要格式化字符串，直接返回原生Date对象，让Chart.js自行解析：

// 只取第一个传感器的日期，避免循环覆盖
if (index === 0) {
    dates = jsonData.map(function(item) {
        var unixTimestamp = item.data_lettura;
        var date = luxon.DateTime.fromMillis(unixTimestamp).minus({hours: 2});
        return date.toJSDate(); // 转换为原生Date对象
    }).reverse();
}

4. 确保数据集与Y轴ID匹配 #

确认每个dataset的yAxisID和yAxes数组中对应轴的id完全一致，你的当前代码这部分逻辑正确，修复后可保留。

完整修复后的代码 #

function renderChart(chart, sensorDataList) {
    var dates = [];
    var datasets = [];
    var yAxes = []; // 修正为数组初始化
    var sensorTypes = {};

    sensorDataList.forEach(function(sensorData, index) {
        var sensorId = sensorData.id;
        var sensorName = sensorData.Nome;
        var sensorType = sensorData.tipo_sensore.nome;
        var jsonData = sensorData.jsonData;

        if (!sensorTypes[sensorType]) {
            sensorTypes[sensorType] = 'y-axis-' + Object.keys(sensorTypes).length;
            yAxes.push({
                id: sensorTypes[sensorType],
                type: 'linear',
                position: yAxes.length === 0 ? 'left' : 'right',
                display: true,
                scaleLabel: {
                    display: true,
                    labelString: sensorType
                }
            });
        }

        // 仅初始化一次日期，避免覆盖
        if (index === 0) {
            dates = jsonData.map(function(item) {
                var unixTimestamp = item.data_lettura;
                var date = luxon.DateTime.fromMillis(unixTimestamp).minus({hours: 2});
                return date.toJSDate();
            }).reverse();
        }

        var values = jsonData.map(function(item) {
            return parseFloat(item.dati[sensorId]);
        }).reverse();

        var color = getRandomColor();
        datasets.push({
            label: sensorName,
            data: values,
            borderColor: color,
            borderWidth: 2,
            fill: false,
            yAxisID: sensorTypes[sensorType]
        });
    });

    var ctx = chart[0].getContext('2d');

    new Chart(ctx, {
        type: 'line',
        data: {
            labels: dates,
            datasets: datasets
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            scales: {
                xAxes: [{
                    type: 'time',
                    time: {
                        unit: 'day',
                        displayFormats: {
                            day: 'DD-MM-YY HH:mm'
                        }
                    },
                    title: {
                        display: true,
                        text: 'Data'
                    }
                }],
                yAxes: yAxes
            }
        }
    });
}

额外注意事项 #

• 确保已正确引入Luxon库，且全局可用，因为v2.x的时间轴依赖第三方时间库解析日期。
• 检查所有传感器的时间序列长度是否一致，否则会导致图表渲染异常。

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