作者：俊欣
来源：关于数据分析与可视化
最近Python圈子当中出来一个非常火爆的框架PyScript，该框架可以在浏览器中运行Python程序，只需要在HTML程序中添加一些Python代码即可实现。该项目出来之后便引起了轰动，马上蹿升到了Github趋势榜榜首，短短20天已经有10K+的star了。既然如此，小编今天就带大家来看看该框架是如何使用的。
我们先来看一下简单的例子，代码如下
<html> <head> <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" /> <script defer src="https://pyscript.net/alpha/pyscript.js"></script> </head> <body> <py-script> print('Hello, World!') </py-script> </body> </html>
其中Python代码被包裹在了py-script标签里面，然后我们在浏览器中查看出来的结果，如下所示
下面这一个例子当中，我们尝试将matplotlib绘制图表的代码放置到HTML代码当中去，以实现绘制出一张直方图的操作。首先是matplotlib代码部分，
import matplotlib.pyplot as plt import numpy as np
np.random.seed(42) ## 随机生成满足正态分布的随机数据 rv = np.random.standard_normal(1000)
fig, ax = plt.subplots()
ax.hist(rv, bins=30)
output
然后我们将上面的代码放置到HTML代码当中去，代码如下
<html> <head> <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css"/> <script defer src="https://pyscript.net/alpha/pyscript.js"></script> <py-env> - numpy
- matplotlib </py-env> </head> <body> <h1>Plotting a histogram of Standard Normal distribution</h1> <div id="plot"></div> <py-script output="plot"> import matplotlib.pyplot as plt
import numpy as np
np.random.seed(42)
rv = np.random.standard_normal(1000)
fig, ax = plt.subplots()
ax.hist(rv, bins=30)
fig </py-script> </body> </html>
output
由于我们后面需要用到numpy和matplotlib两个库，因此我们通过py-env标签来引进它们，另外
我们在上面的基础之上，再来绘制一张折线图，首先我们再创建一个div标签，里面的id是lineplot，代码如下
<div id="lineplot"></div>
同样地在py-script标签中放置绘制折线图的代码，output对应div标签中的id值
<py-script output="lineplot"> ......... </py-script>
绘制折线图的代码如下
import matplotlib.pyplot as plt fig, ax = plt.subplots() year1 = [2016, 2017, 2018, 2019, 2020] population1 = [30, 46, 45, 55, 48] year2 = [2016, 2017, 2018, 2019, 2020] population2 = [43, 48, 44, 75, 45] plt.plot(year1, population1, marker='o', linestyle='--', color='g', label='Countr_1') plt.plot(year2, population2, 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
output
现阶段运行带有Pyscript的页面加载速度并不会特别地快，该框架刚刚推出，仍然处于测试的阶段，后面肯定会不断地优化。要是遇到加载速度慢地问题，读者朋友看一下是不是可以通过更换浏览器得以解决。
数据分析咨询请扫描二维码
若不方便扫码，搜微信号：CDAshujufenxi
在Python面向对象编程（OOP）中，类方法是构建模块化、可复用代码的核心载体，也是实现封装、继承、多态特性的关键工具。无论是 ...
2026-02-27在MySQL数据库优化中，索引是提升查询效率的核心手段—— 面对千万级、亿级数据量，合理创建索引能将查询时间从秒级压缩到毫秒级 ...
2026-02-27在数字化时代，企业积累的海量数据如同散落的珍珠，若缺乏有效的梳理与分类，终将难以发挥实际价值。CDA（Certified Data Analys ...
2026-02-27在问卷调研中，我们常遇到这样的场景：针对同一批调查对象，在不同时间点（如干预前、干预后、随访期）发放相同或相似的问卷，收 ...
2026-02-26在销售管理的实操场景中，“销售机会”是核心抓手—— 从潜在客户接触到最终成交，每一个环节都藏着业绩增长的关键，也暗藏着客 ...
2026-02-26在CDA数据分析师的日常工作中，数据提取、整理、加工是所有分析工作的起点，而“创建表”与“创建视图”，则是数据库操作中最基 ...
2026-02-26在机器学习分析、数据决策的全流程中，“数据质量决定分析价值”早已成为行业共识—— 正如我们此前在运用机器学习进行分析时强 ...
2026-02-25在数字化时代，数据已成为企业决策、行业升级的核心资产，但海量杂乱的原始数据本身不具备价值—— 只有通过科学的分析方法，挖 ...
2026-02-25在数字化时代，数据已成为企业核心资产，而“数据存储有序化、数据分析专业化、数据价值可落地”，则是企业实现数据驱动的三大核 ...
2026-02-25在数据分析、机器学习的实操场景中，聚类分析与主成分分析（PCA）是两种高频使用的统计与数据处理方法。二者常被用于数据预处理 ...
2026-02-24在聚类分析的实操场景中，K-Means算法因其简单高效、易落地的特点，成为处理无监督分类问题的首选工具——无论是用户画像分层、 ...
2026-02-24数字化浪潮下，数据已成为企业核心竞争力，“用数据说话、用数据决策”成为企业发展的核心逻辑。CDA（Certified Data Analyst） ...
2026-02-24CDA一级知识点汇总手册 第五章 业务数据的特征、处理与透视分析考点52：业务数据分析基础考点53：输入和资源需求考点54：业务数 ...
2026-02-23CDA一级知识点汇总手册 第四章 战略与业务数据分析考点43：战略数据分析基础考点44：表格结构数据的使用考点45：输入数据和资源 ...
2026-02-22CDA一级知识点汇总手册 第三章 商业数据分析框架考点27：商业数据分析体系的核心逻辑——BSC五视角框架考点28：战略视角考点29： ...
2026-02-20CDA一级知识点汇总手册 第二章 数据分析方法考点7：基础范式的核心逻辑（本体论与流程化）考点8：分类分析（本体论核心应用）考 ...
2026-02-18第一章：数据分析思维考点1：UVCA时代的特点考点2：数据分析背后的逻辑思维方法论考点3：流程化企业的数据分析需求考点4：企业数 ...
2026-02-16在数据分析、业务决策、科学研究等领域，统计模型是连接原始数据与业务价值的核心工具——它通过对数据的规律提炼、变量关联分析 ...
2026-02-14在SQL查询实操中，SELECT * 与 SELECT 字段1, 字段2,...（指定个别字段）是最常用的两种查询方式。很多开发者在日常开发中，为了 ...
2026-02-14对CDA（Certified Data Analyst）数据分析师而言，数据分析的核心不是孤立解读单个指标数值，而是构建一套科学、完整、贴合业务 ...
2026-02-14
京公网安备 11010802034615号
经营许可证编号：京B2-20210330
