程序员求职经验分享与学习资料整理平台

网站首页 > 文章精选 正文

如何使用 PyScript 在 Web 浏览器上轻松运行

balukai 2024-12-23 16:52:54 文章精选 40 ℃


照片由Firmbee在Unsplash上拍摄

在 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回车键。

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

现在要使用 PyScript，将以下行添加到<head>HTML 模板中的部分。

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

这些行是从PyScript网站中提取的。我会将它们粘贴在<title>标签下方。

你应该有这样的东西。

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

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

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

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

加载 matplotlib

为了制作我们的线图，首先，我们必须在 HTML 文件中加载 matplotlib。我们<py-env>在下面的代码段中使用该标签。

此外，在该部分中，我使用标签<body>为我们的绘图添加了一个标题。<py-script>在该标签内，我使用 Python 代码打印出“My Lineplot”字样。

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

作者图片

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

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

作者图片

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

在 Web 浏览器上显示线图

在我们编写 Python 代码来创建线图之前，在本<body>节中，我们必须创建一个<div>包含id该图的 。id 将是“线图”

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

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

<py-script output="lineplot"> 
   # Python 代码在这里 ... 
</py-script>

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

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

作者图片

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

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

与 Matplotlib 不同，Bokeh 需要在该部分中添加几行额外的行<head>。

我们来看一下。

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

现在让我们在该部分中添加一个<div>和<py-script>标签，<body>以在网络上显示我们的散景图。

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

作者图片

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

Tags：

猜你喜欢

最近发表
标签列表