如何通过点击按钮在Pyscript中调用Matplotlib绘制并显示图表？

核心问题在于按钮触发的异步事件上下文里，需要显式指定Matplotlib图表的渲染目标，并清理旧图表避免缓存冲突。直接调用main时，页面加载阶段的上下文会自动绑定容器，但按钮点击属于异步触发，必须手动处理这两个关键点。

修复后的完整代码示例 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>PyScript Matplotlib Button Demo</title>
    <link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
    <script defer src="https://pyscript.net/latest/pyscript.js"></script>
</head>
<body>
    <button psy-onClick="main()">绘制图表</button>
    <div id="lineplot"></div>

    <py-script>
        import matplotlib.pyplot as plt
        import numpy as np

        def main():
            # 清理所有旧图表，避免重复渲染或上下文冲突
            plt.close('all')
            
            # 生成图表数据与结构
            fig, ax = plt.subplots()
            x = np.linspace(0, 10, 100)
            y = np.sin(x)
            ax.plot(x, y)
            ax.set_xlabel('X轴')
            ax.set_ylabel('Y轴')
            ax.set_title('动态生成的正弦曲线')
            
            # 显式指定渲染到目标容器
            plt.show(target="lineplot")
    </py-script>
</body>
</html>

关键修复点说明 #

• 清理旧图表：plt.close('all')会关闭所有已创建的Matplotlib Figure对象，确保每次点击按钮都生成全新的图表，避免旧图表占用渲染上下文导致新图表无法显示。
• 显式指定渲染目标：plt.show(target="lineplot")强制将图表渲染到ID为lineplot的DOM容器中。直接调用main时，Pyscript会自动绑定页面加载时的容器，但异步事件（如按钮点击）需要明确指定目标才能正确挂载。

额外排查建议 #

如果仍无法显示，打开浏览器控制台（F12）查看是否有报错：

• 检查是否正确导入了matplotlib和numpy（PyScript会自动处理依赖，但网络问题可能导致加载失败）
• 确认lineplot容器的ID拼写完全一致，大小写敏感

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