如何在Flet框架中显示Matplotlib生成的热力图？

问题描述 #

我正在使用Flet框架开发一款数据可视化应用，需要显示Matplotlib生成的热力图，但在两者无缝集成时遇到了困难。以下是我使用的精简代码：

import matplotlib.pyplot as plt
import numpy as np

# Generate sample data
data = np.random.rand(10, 10)

# Create a heatmap
plt.imshow(data, cmap='hot', interpolation='nearest')
plt.colorbar()  # Add a colorbar

# Set axis labels
plt.xlabel('X-axis')
plt.ylabel('Y-axis')

# Set the title
plt.title('Example of a heatmap')

# Display the plot
plt.show()

恳请提供在Flet库中正确显示该Matplotlib热力图的指导及集成示例。

实现方案 #

核心思路 #

Flet无法直接渲染Matplotlib的Figure对象，需先将热力图转换为字节流格式的图片，再通过Flet的Image组件加载显示。

完整集成代码 #

import flet as ft
import matplotlib.pyplot as plt
import numpy as np
from io import BytesIO

def main(page: ft.Page):
    page.title = "Flet + Matplotlib 热力图示例"
    
    # 生成数据并创建热力图（使用Figure和Axes对象，避免全局plt的副作用）
    data = np.random.rand(10, 10)
    fig, ax = plt.subplots()
    im = ax.imshow(data, cmap='hot', interpolation='nearest')
    
    # 配置热力图元素
    fig.colorbar(im, ax=ax)
    ax.set_xlabel('X-axis')
    ax.set_ylabel('Y-axis')
    ax.set_title('Example of a heatmap')
    
    # 将Matplotlib图转换为字节流
    img_bytes = BytesIO()
    fig.savefig(img_bytes, format='png', bbox_inches='tight')
    img_bytes.seek(0)  # 重置字节流指针到开头
    
    # 在Flet页面中添加Image组件展示热力图
    page.add(ft.Image(src_bytes=img_bytes.getvalue(), width=600, height=400))
    
    # 关闭Matplotlib的Figure，释放资源
    plt.close(fig)

if __name__ == "__main__":
    ft.app(target=main)

关键细节说明 #

• 用plt.subplots()创建独立的Figure和Axes对象，替代全局plt调用，避免多实例场景下的资源冲突。
• fig.savefig()将图保存到BytesIO字节流，bbox_inches='tight'参数可防止标题、颜色条被裁剪。
• Flet的Image组件通过src_bytes参数直接加载字节流数据，无需保存到本地文件。
• 调用plt.close(fig)释放Matplotlib资源，避免内存泄漏。

运行步骤 #

1. 安装依赖：

pip install flet matplotlib numpy

2. 运行代码，即可在Flet窗口中看到Matplotlib生成的热力图。

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