dash plotly dcc graph how to fix width of plot-area

Question

我正在使用 Dash-Plotly 构建传感器数据的可视化，到目前为止一切都运行良好。该图每 50 毫秒获取一个新数据点，并更新 x 范围，以便始终准确显示 10 秒。 不幸的是，图表大小不时发生变化，因此可视化效果运行不流畅（请参见 gif）。

有人知道我如何确定地块的大小吗？已经尝试了许多图形、布局和样式选项但没有成功。

布局：

fig_time = go.Figure(layout={"template": 'plotly_dark',
                             "plot_bgcolor": 'rgba(0, 0, 0, 0)',
                             "paper_bgcolor": 'rgba(0, 0, 0, 0)'}, )

fig_time.add_trace(go.Scattergl(x = [] , y = []))
fig_time.add_trace(go.Scattergl(x = [] , y = []))
fig_time.update_xaxes(autorange = False, showgrid=False, showticklabels=True, zeroline=False)
fig_time.update_yaxes(autorange = False, showgrid=False, showticklabels=True, zeroline=False)

layout = html.Div([
...

dbc.Card([
    dcc.Graph(
        id="time_graph",
        figure=fig_time,
    )
], style={"height": "30rem"}),

...

更新代码

time_fig["data"][0]["x"] += [index_list[-1]]
time_fig["data"][0]["y"] += [data_list[-1]]

time_fig["data"][1]["x"] += [index_list_m[-1]]
time_fig["data"][1]["y"] += [data_list_m[-1]]

if len(time_fig["data"][0]["y"]) > threshold:
    time_fig["data"][0]["x"] = time_fig["data"][0]["x"][ -threshold : ]
    time_fig["data"][0]["y"] = time_fig["data"][0]["y"][ -threshold : ]

    time_fig["data"][1]["x"] = time_fig["data"][1]["x"][ -threshold : ]
    time_fig["data"][1]["y"] = time_fig["data"][1]["y"][ -threshold : ]

new_time = index_list[-1] # timeseries-index

time_fig["layout"]["xaxis"]["range"] = [new_time + pd.Timedelta(seconds=-10), new_time]

我试图通过样式选项、将类名设置为“w-100”和多个图形布局选项来修复图形大小，但没有任何效果……