如何创建Python版Plotly实时图表输入用日期时间生成器

需求对应实现点：

• 基于动态生成的时间戳+随机值绘制实时更新的折线图
• 图表视窗自动滚动，仅展示最近30分钟的记录
• 逻辑完全对齐提供的JavaScript参考实现

前置依赖 #

先安装运行所需的依赖包：
pip install plotly dash

完整实现代码 #

import random
from datetime import datetime, timedelta
import plotly.graph_objects as go
from dash import Dash, dcc, html, Input, Output, State

# 初始化应用
app = Dash(__name__)

# 初始化首条数据
start_time = datetime.now()
# 初始化画布
fig = go.Figure()
fig.add_trace(
    go.Scatter(
        x=[start_time],
        y=[random.random()],
        mode='lines',
        line={'color': '#80CAF6'}
    )
)
# 初始X轴范围设置为启动时间前30分钟到启动后1分钟
fig.update_layout(
    xaxis={
        'type': 'date',
        'range': [start_time - timedelta(minutes=30), start_time + timedelta(minutes=1)]
    }
)

# 应用页面布局
app.layout = html.Div([
    dcc.Graph(id='live-timeseries', figure=fig),
    # 定时触发组件，间隔1000ms和JS版本逻辑一致
    dcc.Interval(
        id='interval-component',
        interval=1000,
        n_intervals=0,
        max_intervals=100 # 和JS版本一致，更新100次后停止，需要持续运行直接删除该参数即可
    )
])

# 定义图表更新逻辑
@app.callback(
    Output('live-timeseries', 'figure'),
    Input('interval-component', 'n_intervals'),
    State('live-timeseries', 'figure'),
    prevent_initial_call=True
)
def update_graph(n, existing_fig):
    now = datetime.now()
    # 生成新的随机数据点
    new_point_x = now
    new_point_y = random.random()

    # 追加新数据到现有折线序列
    existing_fig['data'][0]['x'].append(new_point_x)
    existing_fig['data'][0]['y'].append(new_point_y)

    # 裁剪30分钟前的旧数据，避免数据无限增长占用内存
    cut_off_time = now - timedelta(minutes=30)
    keep_start_idx = 0
    for idx, ts_str in enumerate(existing_fig['data'][0]['x']):
        ts = datetime.fromisoformat(ts_str)
        if ts >= cut_off_time:
            keep_start_idx = idx
            break
    existing_fig['data'][0]['x'] = existing_fig['data'][0]['x'][keep_start_idx:]
    existing_fig['data'][0]['y'] = existing_fig['data'][0]['y'][keep_start_idx:]

    # 更新X轴显示范围，固定展示最近30分钟内容
    existing_fig['layout']['xaxis']['range'] = [
        cut_off_time,
        now + timedelta(minutes=1) # 右侧留1分钟空白，和JS版本交互逻辑一致
    ]

    return existing_fig

if __name__ == '__main__':
    app.run_server(debug=True)

使用说明 #

• 运行代码后访问终端输出的本地服务地址（默认为http://127.0.0.1:8050）即可看到实时更新的折线图
• 原JS示例默认显示当前时间前后共2分钟的内容，上述代码已按需求调整为固定展示最近30分钟的数据
• 如果需要在Jupyter Notebook/Lab中运行，将最后一行的app.run_server(debug=True)替换为app.run_server(mode='inline', debug=True)即可在笔记内内嵌展示图表

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