Chart.js：未捕获类型错误：具有多个轴时 yScale 未定义

Question

Chart.js 版本：2.9.4 我有一个函数，可以根据来自 PHP 的 inputData 呈现图表，并根据传感器类型（始终最多为两个轴）显示多个轴：

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;
    
                console.log(sensorType);
    
                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
                        }
                    });
                }
    
                dates = jsonData.map(function(item) {
                    var unixTimestamp = item.data_lettura;
                    var date = luxon.DateTime.fromMillis(unixTimestamp);
                    var date = date.minus({
                        hours: 2
                    });
                    var formattedDate = date.toFormat('dd-MM-yy HH:mm');
                    return formattedDate;
                }).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]
                });
            });
    
            console.log(yAxes);
            console.log(datasets);
    
            var ctx = chart[0].getContext('2d');
    
            new Chart(ctx, {
                type: 'line',
                data: {
                    labels: dates, // Assuming dates are the same for all sensors
                    datasets: datasets
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        x: {
                            type: 'time',
                            time: {
                                unit: 'day'
                            },
                            title: {
                                display: true,
                                text: 'Data'
                            }
                        },
                        y: yAxes
                    }
                }
            });
        }

通过记录两个数组（yAxes 和数据集），一切看起来都很完美：

y 轴：

Array [ {…}, {…} ]
​
0: Object { id: "y-axis-0", type: "linear", position: "left", … }
​​
   display: true
​​
   id: "y-axis-0"
​​
   position: "left"
​​
   scaleLabel: Object { display: true, labelString: "Deformazione" }
​​
   type: "linear"
​​
   <prototype>: Object { … }
​
1: Object { id: "y-axis-1", type: "linear", position: "right", … }
​​
   display: true
​​
   id: "y-axis-1"
​​
   position: "right"
​​
   scaleLabel: Object { display: true, labelString: "Temperatura" }
​​
   type: "linear"
​​
   <prototype>: Object { … }
​
length: 2
​
<prototype>: Array []

数据集：

Array(4) [ {…}, {…}, {…}, {…} ]
​
0: Object { label: "sez. 1_C1", borderColor: "#FD796E", borderWidth: 2, … }
​​
   _meta: Object { 2: {…} }
​​
   borderColor: "#FD796E"
​​
   borderWidth: 2
​​
   data: Array(4) [ 1891.047, 1891.463, 1891.848, … ]
​​
   fill: false
​​
   label: "sez. 1_C1"
​​
   yAxisID: "y-axis-0"
​​
   <prototype>: Object { … }
​
1: Object { label: "sez. 1_C2", borderColor: "#967305", borderWidth: 2, … }
​​
   _meta: Object { 2: {…} }
​​
   borderColor: "#967305"
​​
   borderWidth: 2
​​
   data: Array(4) [ 1529.378, 1529.778, 1530.14, … ]
​​
   fill: false
​​
   label: "sez. 1_C2"
​​
   yAxisID: "y-axis-0"
​​
   <prototype>: Object { … }
​
2: Object { label: "sez. 1_C3", borderColor: "#24D303", borderWidth: 2, … }
​​
   _meta: Object { 2: {…} }
​​
   borderColor: "#24D303"
​​
   borderWidth: 2
​​
   data: Array(4) [ 992.7305, 993.128, 993.5017, … ]
​​
   fill: false
​​
   label: "sez. 1_C3"
​​
   yAxisID: "y-axis-0"
​​
   <prototype>: Object { … }
​
3: Object { label: "Temperatura sez.1", borderColor: "#B54A8C", borderWidth: 2, … }
​​
   _meta: Object { 2: {…} }
​​
   borderColor: "#B54A8C"
​​
   borderWidth: 2
​​
   data: Array(4) [ 21.3703, 21.34067, 21.31012, … ]
​​
   fill: false
​​
   label: "Temperatura sez.1"
​​
   yAxisID: "y-axis-1"
​​
   <prototype>: Object { … }
​
length: 4
​
<prototype>: Array []

我仍然收到错误：未捕获类型错误：yScale未定义。我尝试过调试，一切看起来都很好。知道如何解决这个问题吗？

Answer 1

有语法错误，只需替换：

scales: {
    x: {
           ...
       },
    y: yAxes
}

与：

scales: {
    x: {
           ...
       },
    yAxes: yAxes
}