照片作者
菲尔比
在
在Unsplash拍摄
在PyCon US 2022上，Anaconda的首席执行官宣布了一项名为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模板部分。
这几行摘自Pyscript网站。我会把它们贴在标签下面。
你应该有这样的东西。
太好了！到目前为止，我们已经成功地设置了Pyscript。现在让我们在网络浏览器上画一些可视化图形。
1.Matplotlib使用Pyscript在您的Web浏览器上绘图。
在我们的Web浏览器上使用matplotlib和bokeh绘制可视化的步骤有一些不同。
我们先用matplotlib做一个折线图，在我们的web浏览器中显示。
加载matplotlib
为了制作我们的折线图，首先，我们要在HTML文件中加载matplotlib。我们在下面的代码片段中使用这个标签。
此外，在这一节中，我使用标签为我们的绘图添加了一个标题。在这个标记中，我使用Python代码打印出了单词“My Lineplot”。
要查看结果，我们必须在Web浏览器中打开这个HTML文件。在Pycharm上，我可以通过点击右上角的Chrome图标来轻松实现。
作者图片
你也可以在浏览器上打开HTML文件，方法是右击文件，选择“打开方式”，然后选择Chrome/Safari/Firefox。
选择浏览器后，将打开一个新标签。你应该看看这个。
作者图片
太好了！到目前为止，我们在浏览器中有标题。现在我们来做一个折线图。
在Web浏览器上显示折线图
在我们编写Python代码来创建折线图之前，在本节中，我们必须创建一个包含图形id的。Id将是“线形图”
然后我们使用标签来创建线图。这里我们使用output属性，并将其设置为我们之前定义的id。# Python代码在这里...
这是制作线图的Python代码。
太好了！如果将所有元素放在一起，您应该会在浏览器中看到下面的线图。
作者图片
如果你不能把部件组合在一起，你可以在我的Github上找到完整的代码。
2.使用Pyscript在您的Web浏览器上绘制分散的图片。
与Matplotlib不同，Bokeh需要在这一部分增加几行。
让我们看一看。
代码摘自PyScrpt Github。除了之前我们从Pyscript网站复制的两行代码，还包括Javascript元素等等。
现在，让我们在这个部分添加一个和标签来显示我们在web上的分散图像。
如果你把2个片段放在一起，刷新你的浏览器，你应该会看到下图。
作者图片
就是这样！现在您知道了如何使用Python和HTML在Web浏览器上运行可视化。
