Flask框架：如何运用Ajax轮询动态绘图

在Flask中使用Ajax轮询动态绘图，你需要做以下几步：

使用Flask设置一个URL路由，该路由将返回JSON格式的数据或者图表的静态内容。
使用JavaScript（通常是jQuery或Vanilla JavaScript）编写Ajax轮询客户端代码，定期向Flask后端发送请求。
使用JavaScript的库（如D3.js或Chart.js）来根据接收到的数据动态绘图。

以下是一个简单的例子：

Flask后端代码 (app.py):




from flask import Flask, render_template, jsonify
import random
 
app = Flask(__name__)
 
@app.route('/')
def index():
    return render_template('index.html')
 
@app.route('/data')
def data():
    # 生成随机数据，实际应用中应该从数据库或其他来源获取
    value = random.randint(0, 100)
    return jsonify(value=value)
 
if __name__ == '__main__':
    app.run(debug=True)

前端HTML和JavaScript代码 (index.html):




<!DOCTYPE html>
<html>
<head>
    <title>Dynamic Chart</title>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
    <div>
        <canvas id="myChart" width="400" height="400"></canvas>
    </div>
 
    <script>
        var chartData = [];
        var chart;
 
        function fetchData() {
            $.ajax({
                url: '/data',
                success: function(data) {
                    chartData.push(data.value);
                    updateChart();
                },
                complete: function() {
                    setTimeout(fetchData, 1000); // 轮询间隔1秒
                }
            });
        }
 
        function updateChart() {
            var ctx = document.getElementById('myChart').getContext('2d');
            if (!chart) {
                chart = new Chart(ctx, {
                    type: 'line',
                    data: {
                        labels: ['0s', '1s', '2s', '3s', '4s'], // 初始化标签
                        datasets: [{
                            label: 'Random Value',
                            data: chartData,
                            backgroundColor: 'rgba(0, 0, 255, 0.5)',
                            borderColor: 'rgba(0, 0, 255, 1)',
                            borderWidth: 1
                        }]
                    }
                });
            } else {
                chart.data.datasets.forEach(dataset => {
                    dataset.data.push(chartData.slice(-1)[0]); // 添加最新数据
                });
                chart.update(); // 更新图表
            }

Flask框架：如何运用Ajax轮询动态绘图

评论已关闭

推荐阅读