如何将数据库数据接入chartjs-plugin-streaming实现实时温度折线图

首先梳理你现有代码的错误点：

• 重复声明labels、values变量，会触发变量重复声明的报错
• 初始化数据集的data字段格式错误，realtime类型的X轴要求数据为{x: 时间戳, y: 温度值}的对象数组，你写的data: [values]是嵌套了一层的二维纯数值数组，完全不符合格式要求
• onRefresh回调没有实现拉取最新数据库数据的逻辑，也没有正确给新数据赋值x、y字段

实现步骤与修正代码 #

首先需要后端提供一个简单的查询接口，每次请求返回数据库中最新的一条温度记录，返回格式参考：{"time": 16xxxxxxxxx, "temp": 25}

修正后的完整代码如下：

var ctx = document.getElementById("lineChart2").getContext("2d");
// 处理模板传入的历史数据，转成realtime模式要求的对象数组格式
const initTime = {{ time | safe }};
const initTemp = {{ temp | safe }};
const initData = initTime.map((timeItem, index) => {
  return {x: timeItem, y: initTemp[index]}
})

var lineChart = new Chart(ctx, {
    type: "line",
    data: {
        datasets: [
            {
                label: "温度 °C",
                data: initData,
                fill: false,
                borderColor: "#28a745",
                lineTension: 0.1
            }
        ]
    },
    options: {
        scales: {
            x: {
                type: 'realtime',
                realtime: {
                    // 刷新间隔可自定义，单位为毫秒，此处设置为2秒刷新一次
                    delay: 2000,
                    onRefresh: chart => {
                        // 请求接口获取最新温度数据
                        fetch('/api/get-latest-temperature')
                        .then(res => res.json())
                        .then(latestData => {
                            chart.data.datasets.forEach(dataset => {
                                dataset.data.push({
                                    x: latestData.time,
                                    y: latestData.temp
                                });
                            });
                            // 更新数据后重绘图表
                            chart.update();
                        })
                    }
                }
            }
        }
    }
});

一次性加载全量数据的场景 #

如果你是预先拿到了所有时间、温度数组，需要按顺序模拟实时推送，可以用索引计数器实现，修改onRefresh逻辑即可：

// 预先拿到的全量数据
const allTime = [1637903351687, 1637903353675, 1637903355678, 1637903357678, 1637903359674, 1637903361679, 1637903363672, 1637903365668, 1637903367686, 1637903369669, 163790337167]
const allTemp = [24, 24, 5, 10, 1, 30, 1]
let currentIndex = 0;

// onRefresh逻辑替换为下面的代码
onRefresh: chart => {
  if(currentIndex < allTime.length) {
    chart.data.datasets.forEach(dataset => {
      dataset.data.push({
        x: allTime[currentIndex],
        y: allTemp[currentIndex]
      });
    });
    currentIndex++;
    chart.update();
  }
}

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