如何使用 PyScript 在 Web 浏览器上轻松运行 Python 可视化

使用 PyScript 在 Web 浏览器上运行 matplotlib 和散景可视化的分步指南

在 PyCon US 2022 上，Anaconda 的 CEO 宣布了一项名为 PyScript 的新技术，该技术允许用户在浏览器中编写 Python 代码。

我们只需要在 HTML 中编写和运行 Python 代码来构建 Web 应用程序。这意味着我们不需要担心部署，但一切都会在我们的网络浏览器中发生。

您可以在 Web 浏览器上构建的最酷和最简单的东西之一是 Python 可视化，在本指南中，我将向您展示如何使用 PyScript 在您的 Web 浏览器上显示 matplotlib 和 bokeh 可视化。

在此之后，您甚至可以构建仪表板并共享 HTML 文件，以便其他人可以在他们的 Web 浏览器中看到它。

不想读书？你可以看我的视频代替！

第一件事——将 PyScript 添加到 HTML 模板

要设置 PyScript，我们首先需要一个基本的 HTML 模板。

大多数文本编辑器和 IDE 都有一个可以使用的 HTML 模板。您只需要创建一个 HTML 文件，然后键入 doc 或 html 并按 Enter。

在 Pycharm 中，我可以在编写 doc 后获取模板。以防万一，您没有得到它，这是您可以使用的模板。

现在要使用 PyScript，将以下行添加到 HTML 模板的

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

这些行是从 PyScript 网站中提取的。我会将它们粘贴到

伟大的！到目前为止，我们已经成功设置了 PyScript。现在让我们在我们的网络浏览器上绘制一些可视化。

1. Matplotlib 在您的 Web 浏览器上使用 PyScript 绘图

在我们的 Web 浏览器上使用 matplotlib 和 bokeh 绘制可视化的步骤有些不同。

让我们先用 matplotlib 制作一个线图并在我们的网络浏览器中显示它。

Loading matplotlib

为了制作我们的线图，首先，我们必须在 HTML 文件中加载 matplotlib。我们在下面的代码片段中使用了 标记。

此外，在

标记为我们的绘图添加标题。在该标签内，我使用 Python 代码打印出“My Lineplot”字样。

    
    
    
    
    
    

    
        - matplotlib
    
    
Matplotlib
     print("My Lineplot")

要查看结果，我们必须在 Web 浏览器中打开这个 HTML 文件。在 Pycharm 上，我可以通过转到右上角并单击 Chrome 图标轻松地做到这一点。

您也可以在浏览器上打开 HTML 文件，方法是右键单击文件，选择“打开方式”并选择 Chrome/Safari/Firefox。

选择浏览器后，将打开一个新选项卡。你应该看到这个。

伟大的！到目前为止，我们在浏览器中有标题。现在让我们制作线图。

在 Web 浏览器上显示线图

在我们编写 Python 代码来创建线图之前，在

部分中，我们必须创建一个包含该图 id 的

。 id 将是“线图”

<div id="lineplot"></div>

然后我们使用 标签创建线图。这里我们使用 output 属性并将其设置为我们之前定义的 id。

<py-script output="lineplot">
   # Python Code Goes Here ...
</py-script>

这是制作线图的 Python 代码（你应该把它放在 py-script 标签内）

# Python Code Goes Here ...
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

伟大的！如果将所有元素放在一起，您应该会在浏览器中看到下面的线图（加载可能需要几秒钟）。

如果您无法将各个部分组合在一起，您可以在我的 Github 上找到完整的代码。[0]

2. 使用 PyScript 在您的 Web 浏览器上绘制散景图

与 Matplotlib 不同，Bokeh 需要在

部分添加几行额外的行。

我们来看一下。

代码是从 PyScrpt Github 中提取的，除了我们之前从 PyScript 网站复制的两行代码外，还包括 Javascript 元素（第 8-17 行）等内容。[0]

现在让我们在

部分中添加

和 标签，以在网络上显示我们的散景图。

    
Bokeh
    

    

# Python code        
import json
import pyodide

from js import Bokeh, console, JSON

from bokeh.embed import json_item
from bokeh.plotting import figure
from bokeh.resources import CDN

# create a new plot with default tools, using figure
p = figure(plot_width=400, plot_height=400)

# add a circle renderer with x and y coordinates, size, color, and alpha
p.circle([1, 2, 3, 4, 5], [6, 7, 2, 4, 5], size=15, line_color="navy", fill_color="orange", fill_alpha=0.5)
p_json = json.dumps(json_item(p, "myplot"))

Bokeh.embed.embed_item(JSON.parse(p_json))
    

如果将 2 个片段放在一起并刷新浏览器，您应该会看到下图。

就是这样！现在您知道如何使用 Python 和 HTML 在 Web 浏览器上运行可视化。

用 Python 学习数据科学？加入我的电子邮件列表与 10k+ 人一起获取我的免费 Python for Data Science Cheat Sheet。[0]

如果您喜欢阅读此类故事并希望支持我作为作家，请考虑注册成为 Medium 会员。每月 5 美元，让您可以无限制地访问数以千计的 Python 指南和数据科学文章。如果您使用我的链接注册，我将赚取少量佣金，您无需支付额外费用。[0]