如何将Flask实时传感器数据传入Chart.js生成动态图表

问题背景 #

已实现通过fetch每秒获取Flask服务器传来的传感器整数数据并显示在页面，但更新Chart.js数据时图表会消失，需实现图表实时更新功能。

解决方案 #

核心问题是Chart实例作用域限制及错误的更新方式，以下是修正后的完整代码及关键说明：

完整整合代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Flask App</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
</head>
<body>
    <div id='test'></div>
    <canvas id="myChart" width="400" height="400"></canvas>

<script>
// 全局声明Chart实例，确保fetch回调可访问
let myChart;

document.addEventListener("DOMContentLoaded", function(event) {
    // 初始化Chart图表
    const ctx = document.getElementById('myChart').getContext('2d');
    myChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
            datasets: [{
                label: '传感器读数',
                data: [0, 0, 0, 0, 0, 0], // 初始值设为0，可根据需求调整
                backgroundColor: [
                    'rgba(255, 99, 132, 0.2)',
                    'rgba(54, 162, 235, 0.2)',
                    'rgba(255, 206, 86, 0.2)',
                    'rgba(75, 192, 192, 0.2)',
                    'rgba(153, 102, 255, 0.2)',
                    'rgba(255, 159, 64, 0.2)'
                ],
                borderColor: [
                    'rgba(255, 99, 132, 1)',
                    'rgba(54, 162, 235, 1)',
                    'rgba(255, 206, 86, 1)',
                    'rgba(75, 192, 192, 1)',
                    'rgba(153, 102, 255, 1)',
                    'rgba(255, 159, 64, 1)'
                ],
                borderWidth: 1
            }]
        },
        options: {
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    });

    // 获取传感器数据并更新图表
    const getSensorReading = function() {
        fetch(`http://${location.host}/update`)
            .then((resp) => resp.json())
            .then(function(response) {
                const sensorData = response.data.toFixed(1);
                document.getElementById('test').innerHTML = sensorData;
                
                // 示例：更新最后一个柱状图的数据（Orange对应的位置）
                // 可根据需求修改索引，比如更新第一个数据则修改data[0]
                myChart.data.datasets[0].data[5] = parseFloat(sensorData);
                
                // 若要实现滚动式更新（如折线图），可使用以下逻辑：
                // myChart.data.datasets[0].data.push(parseFloat(sensorData));
                // myChart.data.datasets[0].data.shift();
                // myChart.data.labels.push(new Date().toLocaleTimeString());
                // myChart.data.labels.shift();
                
                // 调用update方法触发图表重新渲染
                myChart.update();
            })
            .catch(err => console.error('数据获取失败:', err));
    }

    getSensorReading();
    setInterval(getSensorReading, 1000);
});
</script>
</body>
</html>

关键修改说明 #

• 全局Chart实例：将myChart声明在DOMContentLoaded回调外部，避免fetch回调因作用域问题无法访问图表实例。
• 增量更新数据：直接修改现有数据集的data数组元素，而非重新创建Chart实例——重复初始化会导致旧实例未清理，引发图表消失问题。
• 强制渲染更新：修改数据后必须调用myChart.update()，这是Chart.js更新图表的标准方式，会触发局部重绘而非完全重建。
• 错误捕获：添加catch处理请求异常，避免因网络或服务器问题导致代码中断。

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