实时数据可视化：使用 Flask, Socket.IO 和 Chart.js 创建动态更新的图表

balabalabiubuibiu

于 2023-10-10 17:37:21 发布

阅读量470

点赞数 1

分类专栏：日攻一卒文章标签：信息可视化 flask javascript

本文链接：https://blog.csdn.net/weixin_40170393/article/details/133751864

版权

日攻一卒专栏收录该内容

11 篇文章 0 订阅

订阅专栏

实现效果：目标是在网页上显示一个实时更新的图表，该图表显示从服务器发送的随机数字。这个过程可以分为以下几个步骤

目标是在网页上显示一个实时更新的图表，该图表显示从服务器发送的随机数字。这个过程可以分为以下几个步骤：

思路和逻辑：
1、服务器端( 使用flask和flask-socketIO）

设置Flask应用和Flask-socketIO
创建后台线程生成随机数（或者使用自己的数据）
当客户端连接的时候，启动后台线程

from flask import Flask, render_template
from flask_socketio import SocketIO
import random
import time
#Flask 和 render_template: 这两个是 Flask 框架的核心部分，用于创建 web 服务器和渲染 HTML 模板。
#SocketIO: Flask-SocketIO 扩展，为 Flask 应用程序添加对 WebSocket 的支持。
#random: Python 标准库的一部分，用于生成随机数。
#time: Python 标准库的一部分，提供了时间相关的函数，这里用于暂停执行。


#设置 Flask 应用和 Socket.IO
app = Flask(__name__)
app.config['SECRET_KEY'] = 'secret!'
socketio = SocketIO(app, cors_allowed_origins="*")
#app = Flask(__name__): 创建一个新的 Flask web 应用实例。
#app.config['SECRET_KEY'] = 'secret!': 设置 Flask 应用的密钥。这个密钥用于保持客户端的会话安全。
#socketio = SocketIO(app, cors_allowed_origins="*"): 创建一个新的 SocketIO 实例，并将其与 Flask 应用关联。



#定义路由和视图
@app.route('/')
def index():
    return render_template('index.html')
# @app.route('/'): 定义一个新的路由，它匹配到网站的根 URL (/)。
#def index(): 定义一个新的视图函数，它将被触发当用户访问根 URL。
#return render_template('index.html'): 渲染并返回 index.html 文件。


#定义后台线程
def background_thread():
    for i in range(10):
    # while True:

        number = random.randint(0, 100)  # 生成随机数
        socketio.emit('new_number', {'number': number}, namespace='/test')
        time.sleep(1)  # 每秒发送一次
#def background_thread(): 定义一个函数，它将在后台运行并定期生成和发送数据。
#for i in range(10): 创建一个循环，它将运行 10 次。
#number = random.randint(0, 100): 生成一个在 0 到 100 之间的随机整数。
#socketio.emit('new_number', {'number': number}, namespace='/test'): 使用 Socket.IO 发送新的随机数到所有连接的客户端。
#time.sleep(1): 暂停执行 1 秒。


#定义 Socket.IO 事件处理程序
@socketio.on('connect', namespace='/test')
def test_connect():
    socketio.start_background_task(target=background_thread)
#@socketio.on('connect', namespace='/test'): 定义一个新的事件处理程序，它将在客户端连接时被触发。
#def test_connect(): 定义事件处理程序的函数。
#socketio.start_background_task(target=background_thread): 启动后台线程。

#启动 Flask 应用
if __name__ == '__main__':
    socketio.run(app, debug=True, allow_unsafe_werkzeug=True)

#if __name__ == '__main__': 确保以下代码只在直接运行此脚本时执行。
#socketio.run(app, debug=True, allow_unsafe_werkzeug=True): 启动 Flask 应用，并允许使用 Werkzeug 服务器（仅用于开发目的）。

2、客户端（使用HTML、JavaScript、Chart.js 和socket.IO）

创建html页面，包含‘canvas’元素渲染图标
使用js创建Chart.js图标实例，绑定到‘canvas’元素，并初始化为空的数据集
使用Socket.io创建一个到服务器的连接
设置一个socket.io时间监听器，监听来自服务器的数字，当接受数字后，将数字添加到图标的数据集中，更新图标

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Real-Time Chart</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js"></script>
</head>
<!-- <meta charset="UTF-8">: 设置文档的字符集为UTF-8。
<meta name="viewport" content="width=device-width, initial-scale=1.0">: 设置视口的宽度为设备的宽度，并且初始缩放为1。

<title>Real-Time Chart</title>: 设置页面的标题。

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>: 从CDN加载Chart.js库。

<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js"></script>: 从CDN加载Socket.io库。  -->
<body>
    <canvas id="myChart" width="400" height="200"></canvas>
    <!--<canvas id="myChart" width="400" height="200"></canvas>: 创建一个canvas元素，它是图表将被渲染到的地方。   -->
    <script>
        var ctx = document.getElementById('myChart').getContext('2d');
        var data = {
            labels: [],
            datasets: [{
                label: 'Real-Time Data',
                data: [],
                backgroundColor: 'rgba(75, 192, 192, 0.2)',
                borderColor: 'rgba(75, 192, 192, 1)',
                borderWidth: 1
            }]
        };

        var myChart = new Chart(ctx, {
            type: 'line',
            data: data,
            options: {
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });

        var socket = io.connect('http://localhost:5000/test');
        socket.on('new_number', function(msg) {

            data.labels.push(new Date().toLocaleTimeString());
            data.datasets[0].data.push(msg.number);
            myChart.update();
        });
	/*<script>标签内的JavaScript代码：
var ctx = document.getElementById('myChart').getContext('2d');: 获取canvas元素，并从中获取2D渲染上下文。
定义 data 对象，其中包括：
labels: 一个空数组，将用于存储X轴上的标签。
datasets: 一个包含一个对象的数组，该对象有以下属性：
label: 数据集的标签。
data: 一个空数组，将用于存储Y轴上的数据点。
backgroundColor 和 borderColor: 定义图表线条和填充的颜色。
borderWidth: 定义图表线条的宽度。
var myChart = new Chart(ctx, { ... }): 使用 ctx 和 data 创建一个新的图表实例。
var socket = io.connect('http://localhost:5000/test');: 创建一个到服务器的Socket.io连接。
socket.on('new_number', function(msg) { ... }): 定义一个事件监听器，当从服务器接收到 new_number 事件时触发。
在事件监听器的回调函数中：
将当前时间的字符串形式推送到 data.labels 数组中。
将从服务器接收到的新数字推送到 data.datasets[0].data 数组中。
调用 myChart.update(); 来更新图表。  */
    </script>
</body>


</html>

3、需要的库：pip install Flask Flask-SocketIO

4、代码框架图：

在这里插入图片描述

balabalabiubuibiu

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
实时数据可视化：使用 Flask, Socket.IO 和 Chart.js 创建动态更新的图表

socket.on('new_number', function(msg) { ... }): 定义一个事件监听器，当从服务器接收到 new_number 事件时触发。var myChart = new Chart(ctx, { ... }): 使用 ctx 和 data 创建一个新的图表实例。labels: 一个空数组，将用于存储X轴上的标签。data: 一个空数组，将用于存储Y轴上的数据点。
复制链接

扫一扫