龙空技术网

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

杨同学编程 965

前言:

当前大家对“在python程序中嵌入浏览器”大体比较看重,小伙伴们都想要分析一些“在python程序中嵌入浏览器”的相关内容。那么小编在网摘上网罗了一些关于“在python程序中嵌入浏览器””的相关内容,希望兄弟们能喜欢,大家一起来学习一下吧!

照片由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="; /> <script defer src=";></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 浏览器上运行可视化。

标签: #在python程序中嵌入浏览器