如何將數據從數據庫添加到 chartjs-plugin-streaming

Question

您好，我正在制作一個圖表，它將顯示這段時間內的溫度，我需要實時進行，我找到了 chart.js 但我不知道如何將數據庫中的數據添加到圖表中。

var ctx = document.getElementById("lineChart2").getContext("2d");
const labels = {{ time | safe }};
const values = {{ temp | safe }};

var lineChart = new Chart(ctx, {
    type: "line",
    data: {
        labels: labels,
        datasets: [
            {
                label: "Temperatura °C",
                data: [values],
                fill: false,
                borderColor: "#28a745",
                lineTension: 0.1
            }
        ]
    },
    options: {
        scales: {
            x: {
                type: 'realtime',
                realtime: {
                    onRefresh: chart => {
                        chart.data.datasets.forEach(dataset => {
                            dataset.data.push({
                                x: //IT'S HERE labels
                                y: //IT'S HERE values
                            });
                        });
                    }
                }
            }
        },
        
    }
});

const labels = [1637903351687, 1637903353675, 1637903355678, 1637903357678, 1637903359674, 1637903361679, 1637903363672, 1637903365668, 1637903367686, 1637903369669, 163790337167] //time unix

const values = [24, 24, 5, 10, 1, 30, 1] //temperature

Answer 1

根據Chart.js 文檔，您可以使用以下內容更新圖表：

async function updateGraphWithData() {
    const data = await apiCall(); // Your call to your backend

    lineChart.data.datasets.forEach(dataset => {
        dataset.data = data;
    });

    lineChart.update();
}

您需要一些會觸發 function 的東西（例如單擊按鈕）或其他東西。