如何在PyQt5应用中实现Plotly图表随窗口自动缩放？

问题根源 #

1. 使用 setGeometry 固定了浏览器控件的尺寸和位置，导致它无法随窗口大小变化而调整。
2. 未将浏览器控件添加到布局中，布局无法自动管理其尺寸。
3. Plotly 图表未启用响应式配置，即便浏览器控件尺寸变化，图表也不会自适应。

修正后的代码 #

MainWindow 初始化代码

class MainWindow(QWidget, From_Main):
    def __init__(self):
        super(MainWindow, self).__init__()
        self.setupUi(self)
        
        self.browser = QtWebEngineWidgets.QWebEngineView(self)
        
        # 使用垂直布局管理控件，移除固定尺寸的 setGeometry
        vlayout = QtWidgets.QVBoxLayout(self)
        vlayout.addWidget(self.BtnDescribe, alignment=QtCore.Qt.AlignHCenter)
        # 将浏览器添加到布局，使其自动填充剩余空间
        vlayout.addWidget(self.browser)

绘图函数 plotter 代码

def plotter(self):
    df_period = self.all_data.loc[:len(self.all_data)-13]
    df_predict = self.all_data.loc[len(self.all_data)-12:]
    fig = go.Figure()
    fig.add_trace(go.Scatter(x=df_period.index, y=df_period['value'], mode='lines', name='value'))
    fig.add_trace(go.Scatter(x=df_predict.index, y=df_predict['value'], mode='lines', opacity=0.7, name='value_true'))
    fig.add_trace(go.Scatter(x=df_predict.index, y=df_predict['value_predict'], mode='lines',  name='value_predict'))
    
    # 启用 Plotly 响应式配置，让图表自适应容器尺寸
    self.browser.setHtml(fig.to_html(include_plotlyjs='cdn', config={'responsive': True}))

关键说明 #

• 移除 setGeometry 并将浏览器加入布局后，布局会自动根据窗口大小调整浏览器的尺寸。
• config={'responsive': True} 让 Plotly 图表自动填充浏览器控件的空间，并随控件尺寸变化而缩放。
• 若你的 UI 设计中有专门用于放置图表的容器（如 QFrame/QWidget），可将浏览器添加到该容器的布局中，而非主窗口布局，以更精准控制位置。

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