如何将Pandas分析及动态图表嵌入HTML页面并实现自动刷新？

方案一：后端定时重生成图表 + 前端自动刷新 #

适合依赖Pandas复杂分析逻辑的场景：

• 用轻量后端框架（比如Flask）写接口，每次请求时重新读取最新CSV，完成分析后生成图表：
  • Matplotlib：将图表转为base64编码返回，或保存到静态目录提供访问
  • Plotly：通过fig.to_json()生成图表的JSON格式数据返回
• 前端HTML中：
  • Matplotlib图表用<img>标签加载，通过setInterval定时修改src（加时间戳避免缓存）
  • Plotly图表用官方JS库，定时请求后端JSON数据，调用Plotly.react()更新图表

后端示例（Flask） #

from flask import Flask, jsonify, send_file
import pandas as pd
import matplotlib.pyplot as plt
import io
import plotly.express as px

app = Flask(__name__)

@app.route('/matplotlib-chart')
def get_matplotlib_chart():
    df = pd.read_csv('data.csv')
    plt.figure()
    df['value'].plot()
    img_io = io.BytesIO()
    plt.savefig(img_io, format='png')
    img_io.seek(0)
    plt.close()
    return send_file(img_io, mimetype='image/png')

@app.route('/plotly-chart')
def get_plotly_chart():
    df = pd.read_csv('data.csv')
    fig = px.line(df, x='date', y='value')
    return jsonify(fig.to_json())

if __name__ == '__main__':
    app.run(host='0.0.0.0', port=5000)

前端示例 #

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
    <h3>Matplotlib 实时图表</h3>
    <img id="matplot-img" src="http://localhost:5000/matplotlib-chart">

    <h3>Plotly 实时图表</h3>
    <div id="plotly-div"></div>

    <script>
        // 每30秒刷新Matplotlib图表
        setInterval(() => {
            const img = document.getElementById('matplot-img');
            img.src = `http://localhost:5000/matplotlib-chart?timestamp=${Date.now()}`;
        }, 30000);

        // 更新Plotly图表
        function updatePlotly() {
            fetch('http://localhost:5000/plotly-chart')
                .then(res => res.json())
                .then(data => Plotly.react('plotly-div', data.data, data.layout));
        }
        updatePlotly();
        setInterval(updatePlotly, 30000);
    </script>
</body>
</html>

方案二：纯前端直接处理CSV（无需后端） #

适合分析逻辑简单、数据量不大的场景：

• 用Plotly.js + D3.js直接在前端拉取最新CSV，完成基础数据处理并渲染图表
• 通过setInterval定时重新加载CSV，更新图表数据

前端示例 #

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
    <script src="https://d3js.org/d3.v7.min.js"></script>
</head>
<body>
    <div id="chart"></div>

    <script>
        function updateChart() {
            d3.csv('data.csv?t='+Date.now()).then(data => {
                // 转换数据类型
                data.forEach(d => {
                    d.value = +d.value;
                    d.date = new Date(d.date);
                });
                // 生成图表
                const trace = {
                    x: data.map(d => d.date),
                    y: data.map(d => d.value),
                    type: 'line'
                };
                Plotly.react('chart', [trace], {title: '实时数据图表'});
            });
        }
        updateChart();
        setInterval(updateChart, 30000);
    </script>
</body>
</html>

注意事项 #

• 缓存规避：请求资源时添加时间戳参数，避免浏览器缓存旧数据
• 刷新频率：根据CSV实际更新频率调整间隔，减少无效请求
• 性能优化：数据量大时优先用后端处理，降低前端计算压力

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