能否在Streamlit页面中展示带交互工具的Matplotlib图形？

可行，通过配置Matplotlib的交互式后端并结合Streamlit的HTML渲染能力，完全可以实现带平移/缩放、矩形选择器等原生Matplotlib交互部件的图形展示。

实现步骤与代码示例 #

1. 安装依赖
   首先确保安装所需包：

pip install matplotlib ipympl streamlit

2. 编写核心代码
   以下示例实现了带矩形选择器、平移缩放工具栏的交互式Matplotlib图形，并在Streamlit中渲染：

import streamlit as st
import matplotlib.pyplot as plt
from matplotlib.widgets import RectangleSelector
import numpy as np
from ipympl.backend_nbagg import Canvas

# 切换到ipympl交互式后端，让Matplotlib生成Web可交互元素
plt.switch_backend('module://ipympl.backend_nbagg')

# 创建基础图形
fig, ax = plt.subplots(figsize=(8, 5))
x = np.linspace(0, 10, 200)
y = np.sin(x) + np.random.randn(200)*0.1
ax.plot(x, y, label='带噪声的正弦曲线')
ax.legend()
ax.set_xlabel('X轴')
ax.set_ylabel('Y轴')

# 定义矩形选择的回调逻辑
def handle_rect_select(eclick, erelease):
    # 获取选择区域的坐标
    x_start, y_start = eclick.xdata, eclick.ydata
    x_end, y_end = erelease.xdata, erelease.ydata
    # 在Streamlit侧边栏展示选择结果
    st.sidebar.subheader('选择区域信息')
    st.sidebar.write(f"X范围: [{min(x_start, x_end):.2f}, {max(x_start, x_end):.2f}]")
    st.sidebar.write(f"Y范围: [{min(y_start, y_end):.2f}, {max(y_start, y_end):.2f}]")

# 添加矩形选择器部件
rect_selector = RectangleSelector(
    ax, handle_rect_select,
    drawtype='box', useblit=True,
    button=[1],  # 仅左键触发选择
    minspanx=3, minspany=3,
    interactive=True
)

# 将交互式图形转换为HTML并在Streamlit中渲染
canvas = Canvas(fig.canvas)
st.components.v1.html(canvas.to_html(), height=600)

关键说明 #

• 依赖ipympl后端：它将Matplotlib的原生交互组件（工具栏、矩形选择器等）转换为Web兼容的交互元素，解决了Streamlit默认渲染静态Matplotlib图的问题。
• 交互工具可用性：图形顶部会自动显示Matplotlib默认的平移、缩放、保存等工具栏，矩形选择器可通过左键拖拽触发，回调函数可直接与Streamlit的UI元素联动。
• 渲染适配：可通过调整st.components.v1.html的height参数，确保图形和工具栏完整显示。

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