Dash中Plotly实时图表数据越界及自适应全屏问题求助

一、让坐标轴自动适配新数据 #

问题根源是坐标轴未自动调整范围容纳新增数据，只需在布局中为x、y轴开启autorange=True即可实现自动缩放：

修改layout部分代码：

layout = go.Layout(
    title='Real-time Data',
    xaxis=dict(title='Datetime', autorange=True),  # 开启x轴自动适配
    yaxis=dict(title='Value', autorange=True)     # 开启y轴自动适配
)

如果不需要过渡动画效果，可以移除dcc.Graph的animate=True参数，避免动画导致的轴范围延迟调整问题。

二、实现全屏响应式图表 #

要让图表自动占满全屏，需从外层容器到图表组件逐层设置全屏样式：

1. 修改app.layout中的容器和图表样式：

app.layout = html.Div(
    [
        dcc.Graph(
            id='live-graph',
            style={'width': '100%', 'height': '100%'}  # 图表占满父容器
        ),
        dcc.Interval(
            id='graph-update',
            interval=5000,
            n_intervals=0
        ),
    ],
    style={'width': '100vw', 'height': '100vh', 'margin': 0, 'padding': 0}  # 外层容器占满视口
)

2. 保留update_layout中的autosize=True，确保图表随容器大小自动调整。

修改后的完整代码 #

import dash
from dash import dcc, html
from dash.dependencies import Input, Output
from datetime import datetime
import plotly.graph_objs as go
import random

x_values = []
y_values = []

app = dash.Dash()

app.layout = html.Div(
    [
        dcc.Graph(
            id='live-graph',
            style={'width': '100%', 'height': '100%'}
        ),
        dcc.Interval(
            id='graph-update',
            interval=5000,
            n_intervals=0
        ),
    ],
    style={'width': '100vw', 'height': '100vh', 'margin': 0, 'padding': 0}
)

@app.callback(Output('live-graph', 'figure'), [Input('graph-update', 'n_intervals')])
def update_graph(n):
    current_value = random.randint(2000, 8000)
    x = datetime.now()
    x_values.append(x)
    y_values.append(current_value)

    trace = go.Scatter(x=x_values, y=y_values)
    data = [trace]

    layout = go.Layout(
        title='Real-time Data',
        xaxis=dict(title='Datetime', autorange=True),
        yaxis=dict(title='Value', autorange=True)
    )

    return go.Figure(data=data, layout=layout).update_layout(
        autosize=True,
        margin=dict(l=0, r=0, t=40, b=0)  # 保留顶部边距显示标题，可按需调整
    )

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

说明：

• 外层html.Div用100vw和100vh确保占满整个屏幕，同时清除默认边距和内边距。
• 坐标轴autorange=True会在每次更新数据时自动计算并调整范围，确保新数据始终在可视区域内。
• 调整margin的t=40避免标题被顶部边缘遮挡，可根据需求修改数值。

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