PyScript标签内Matplotlib图表无法显示，求实现方法及配置

问题现象 #

在HTML的PyScript标签中运行Python代码时，打印文本功能正常，但Matplotlib生成的图表无法显示。原代码如下：

<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
    <script defer src="https://pyscript.net/latest/pyscript.js"></script>


    <py-env>
        -matplotlib
    </py-env>
</head>
<body>
    <h1>Matplotlib</h1>
    <div id="lineplot"></div>
    <py-script output="lineplot">
        import matplotlib.pyplot as plt
        fig, ax = plt.subplots()

        year_1 = [2016, 2017, 2018, 2019, 2020, 2021]
        population_1 = [42, 43, 45, 47, 48, 50]

        year_2 = [2016, 2017, 2018, 2019, 2020, 2021]
        population_2 = [43, 43, 44, 44, 45, 45]

        plt.plot(year_1, population_1, marker='o', linestyle='--', color='g', label='Country 1')
        plt.plot(year_2, population_2,  marker='d', linestyle='-', color='r', label='Country 2')

        plt.xlabel('Year')
        plt.ylabel('Population (M)')
        plt.title('Year vs Population')
        plt.legend(loc='lower right')

        fig
    </py-script>
</body>
</html>

必备配置 #

• 必须在HTML头部引入PyScript的样式与脚本文件，这是运行PyScript的基础：

  <link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
  <script defer src="https://pyscript.net/latest/pyscript.js"></script>
  

• 在<py-env>标签中声明matplotlib依赖，让Pyodide自动在浏览器环境中安装该库：

  <py-env>
      - matplotlib
  </py-env>
  

代码修正方案 #

原代码无法显示图表的核心原因是未明确触发图表的渲染逻辑，需做以下调整：

1. 从pyscript库导入display函数，用于将Matplotlib图表绑定到指定DOM元素；
2. 替换原代码末尾的fig为display(fig, target="lineplot")，明确指定图表要渲染到页面中id为lineplot的div容器。

修正后的完整代码：

<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Matplotlib + PyScript Demo</title>
    <link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
    <script defer src="https://pyscript.net/latest/pyscript.js"></script>

    <py-env>
        - matplotlib
    </py-env>
</head>
<body>
    <h1>Matplotlib + PyScript Demo</h1>
    <div id="lineplot"></div>
    <py-script>
        import matplotlib.pyplot as plt
        from pyscript import display

        fig, ax = plt.subplots()

        year_1 = [2016, 2017, 2018, 2019, 2020, 2021]
        population_1 = [42, 43, 45, 47, 48, 50]

        year_2 = [2016, 2017, 2018, 2019, 2020, 2021]
        population_2 = [43, 43, 44, 44, 45, 45]

        plt.plot(year_1, population_1, marker='o', linestyle='--', color='g', label='Country 1')
        plt.plot(year_2, population_2,  marker='d', linestyle='-', color='r', label='Country 2')

        plt.xlabel('Year')
        plt.ylabel('Population (M)')
        plt.title('Year vs Population')
        plt.legend(loc='lower right')

        # 将图表渲染到指定div容器
        display(fig, target="lineplot")
        plt.close(fig)  # 可选：释放内存资源
    </py-script>
</body>
</html>

额外注意事项 #

• 无需本地安装Python或Matplotlib，所有依赖由PyScript通过Pyodide在浏览器中自动处理；
• 若遇到版本兼容性问题，可将latest替换为具体的PyScript版本号（如2024.3.1）；
• 多图表场景下，建议使用plt.close(fig)释放内存，避免浏览器性能下降。

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