我的包含 2 个数据的组合图表有问题

Question

我有一个显示水和烟雾的图表，它是从我的 firebase 项目中获取的。为什么当我添加要在图表中显示的水的数据时，它会等待先显示烟雾数据，然后再在图表中显示水数据？

    var database = firebase.database();
    var ctx = document.getElementById('combinedChart').getContext('2d');
    var combinedChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: [],
            datasets: [{
                label: 'Smoke Sensor Value',
                data: [],
                backgroundColor: 'rgba(255, 99, 132, 0.2)',
                borderColor: 'rgba(255, 99, 132, 1)',
                borderWidth: 1
            },
            {
                label: 'Water Sensor Value',
                data: [],
                backgroundColor: 'rgba(54, 162, 235, 0.2)',
                borderColor: 'rgba(54, 162, 235, 1)',
                borderWidth: 1
            }]
        },
        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero: true
                    }
                }]
            }
        }
    });
    database.ref('smokeNumber').on('value', function(snapshot) {
        var smokeData = snapshot.val();
        var time = new Date().toLocaleTimeString();
        combinedChart.data.labels.push(time);
        combinedChart.data.datasets[0].data.push(smokeData);
        if (combinedChart.data.labels.length > 10) {
            combinedChart.data.labels.shift();
            combinedChart.data.datasets[0].data.shift();
        }
        combinedChart.update();
    });

    database.ref('waterNumber').on('value', function(snapshot) {
        var waterData = snapshot.val();
        var time = new Date().toLocaleTimeString();
        combinedChart.data.datasets[1].data.push(waterData);
        if (combinedChart.data.labels.length > 10) {
            combinedChart.data.datasets[1].data.shift();
        }
        combinedChart.update();
    });

我想同时在图表中显示我的两个数据，而不是等待其中一个数据先显示后再显示其他数据。

Answer 1

您遇到的问题源于您处理传入数据以及更新烟雾和水传感器值图表的方式。您当前的方法会在每次收到新的烟雾值时更新图表的标签和烟雾数据集，但仅在收到新的水值时更新水数据集（不添加新标签）。正如您所注意到的，这种方法可能会导致标签和数据集之间出现同步问题。

要解决此问题，您应该确保烟雾和水数据更新都包含新的时间戳，并一致地管理两者的标签和数据集的长度。这是一个改进的方法：

    var database = firebase.database();
var ctx = document.getElementById('combinedChart').getContext('2d');
var combinedChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: [],
        datasets: [{
            label: 'Smoke Sensor Value',
            data: [],
            backgroundColor: 'rgba(255, 99, 132, 0.2)',
            borderColor: 'rgba(255, 99, 132, 1)',
            borderWidth: 1
        },
        {
            label: 'Water Sensor Value',
            data: [],
            backgroundColor: 'rgba(54, 162, 235, 0.2)',
            borderColor: 'rgba(54, 162, 235, 1)',
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }]
        }
    }
});

function updateChartWithNewData(sensorType, newData) {
    var time = new Date().toLocaleTimeString();
    if (combinedChart.data.labels.length >= 10) {
        combinedChart.data.labels.shift();
        combinedChart.data.datasets.forEach(dataset => {
            dataset.data.shift();
        });
    }
    if (!combinedChart.data.labels.includes(time)) {
        combinedChart.data.labels.push(time);
    }
    
    var datasetIndex = sensorType === 'smoke' ? 0 : 1;
    combinedChart.data.datasets[datasetIndex].data.push(newData);
    combinedChart.update();
}

database.ref('smokeNumber').on('value', function(snapshot) {
    var smokeData = snapshot.val();
    updateChartWithNewData('smoke', smokeData);
});

database.ref('waterNumber').on('value', function(snapshot) {
    var waterData = snapshot.val();
    updateChartWithNewData('water', waterData);
});

该解决方案引入了 updateChartWithNewData 函数，该函数以一致的方式处理烟雾和水数据图表的更新。它确保仅在必要时添加新时间戳，并且一致地维护标签和数据集大小，从而防止您遇到的不同步问题。

尝试一下这个方法，它应该可以有效地解决你的问题。