Skip to main content
 Web开发网 » 站长学院 » 浏览器插件

就算你不会 Web 开发,也能让数据“动”起来的开源项目

2021年10月11日7370百度已收录

本文面向有 Python 基础的小伙伴,有 Web 基础的更好

就算你不会 Web 开发,也能让数据“动”起来的开源项目  web开发 第1张

作者:HelloGitHub-吱吱

这里是 HelloGitHub 推出的《讲解开源项目》系列,今天要向小伙伴们介绍的是一个能够快速地把数据制作成可视化、交互页面的 Python 框架:Streamlit,分分钟让你的数据动起来!

犹记得我在做机器学习和数据分析方面的毕设时,曾经为了制作精美的图表而抓耳挠腮,曾经为了在页面可视化、交互式展示数据而绞尽脑汁。现在摆在我们面前的是一个能够快速可视化数据并且制作成交互页面的 Python 框架,仅需几分钟就可以快速构建和部署功能强大的数据应用程序,写到这里 Streamlit 的高傲已经尽数体现了。

Streamlit - The fastest way to build and share data apps

就算你不会 Web 开发,也能让数据“动”起来的开源项目  web开发 第2张

下面我们就一起来上手这个强大的 Python 数据可视化框架吧!

一、浅尝辄止1、本地实验环境:Python 3.6 - Python 3.8。

2、安装 Streamlit 体验官方提供的 hello world 小 demo。

pip install streamlitstreamlit hello就算你不会 Web 开发,也能让数据“动”起来的开源项目  web开发 第3张

3、运行上述命令后会自动打开 Streamlit 的初始页面 /。

就算你不会 Web 开发,也能让数据“动”起来的开源项目  web开发 第4张

4、通过左边栏可以选择四个内置小项目并查看其代码,例如分形动画、折线图和层叠地图等,能在网页上点击选择设置一些参数,动态查看效果。

就算你不会 Web 开发,也能让数据“动”起来的开源项目  web开发 第5张

就算你不会 Web 开发,也能让数据“动”起来的开源项目  web开发 第6张

二、熟能生巧通过 Streamlit 提供的接口,完美避开 Django 和 Flask 框架,无需编写 HTML、CSS、JavaScript 代码,与魔幻的前端 say goodbye。

2.1 开发自己的 app1、首先创建一个 Python 文件,命名为 test.py,导入 Streamlit 库。

import streamlit as st2、通过如下命令启动项目,Ctrl + c 即可结束项目。

# filename 自己的 py 文件名称streamlit run [filename]就算你不会 Web 开发,也能让数据“动”起来的开源项目  web开发 第7张

3、当应用程序正在运行时,每次修改 Python 文件并保存,网页都会弹出提示“Source file changed”,可以选择“Rerun”或者“Always rerun”,使得页面能够重新刷新。忽略掉小小的等待时间,我们能够在快速交互循环中「所见即所得」。

4、我们在任何时候对网页内容进行更新,包括:修改源码、使用者和网页进行交互(点击网页的按钮、输入文本),Streamlit 都是自上而下扫描解析并且运行整个代码。

2.2 基础命令2.2.1 显示文本就算你不会 Web 开发,也能让数据“动”起来的开源项目  web开发 第8张

就算你不会 Web 开发,也能让数据“动”起来的开源项目  web开发 第9张

2.2.2「魔法」我愿称之为懒人命令——用尽量少的代码达到同样的效果。在不调用任何 Streamlit 方法的情况下,当用户自定义的变量出现在单行中,等同于 st.write() 效果。

import pandas as pddf = pd.DataFrame({  'first column': [1, 2, 3, 4],  'second column': [10, 20, 30, 40]})df就算你不会 Web 开发,也能让数据“动”起来的开源项目  web开发 第10张

也可以将 ''' 和 ' 包裹的内容直接显示。

# Draw a title and some text to the app:'''# Welcome to HelloGitHub_快来加入我们吧_'''x = 10'x', x  # <-- Draw the string 'x' and then the value of x就算你不会 Web 开发,也能让数据“动”起来的开源项目  web开发 第11张

2.2.3 显示数据表Streamlit 能从多个不同角度快速、交互的可视化数据,原始数据、图表、JSON 数据等皆可。

就算你不会 Web 开发,也能让数据“动”起来的开源项目  web开发 第12张

就算你不会 Web 开发,也能让数据“动”起来的开源项目  web开发 第13张

2.2.4 绘制图表和地图Streamlit 支持多种流行的数据图表库,如 Matplotlib、Altair、deck.gl 等。

就算你不会 Web 开发,也能让数据“动”起来的开源项目  web开发 第14张

就算你不会 Web 开发,也能让数据“动”起来的开源项目  web开发 第15张

2.2.5 显示多媒体动动鼠标即可将图像、视频和音频文件直接嵌入 Streamlit 应用程序。

就算你不会 Web 开发,也能让数据“动”起来的开源项目  web开发 第16张

就算你不会 Web 开发,也能让数据“动”起来的开源项目  web开发 第17张

2.2.6 交互式小部件盯:漂亮的按钮、滑块、输入框等小部件。每次用户与小部件交互时,Python 脚本都会重新执行,并且该小部件的输出值会在运行期间设置为新值。

1、按钮 button。

if st.button('HelloGitHub'):    st.write('Subscribe our channels~')就算你不会 Web 开发,也能让数据“动”起来的开源项目  web开发 第18张

2、复选框 checkbox。

ret = st.checkbox('I love HelloGitHub!')if ret:  st.write('Me too~')就算你不会 Web 开发,也能让数据“动”起来的开源项目  web开发 第19张

3、滑块 slider,可以选择 int / float / data / time / datetime 等类型。

age = st.slider('HelloGitHub 几岁了?', 0, 10, 1)st.write("HelloGitHub ", age, ' 岁了~')就算你不会 Web 开发,也能让数据“动”起来的开源项目  web开发 第20张

4、常用的命令列举

就算你不会 Web 开发,也能让数据“动”起来的开源项目  web开发 第21张

2.2.7 显示进程和状态1、进度条 progress。

import timemy_bar = st.progress(0)for percent_complete in range(100):    time.sleep(0.1)    my_bar.progress(percent_complete + 1)就算你不会 Web 开发,也能让数据“动”起来的开源项目  web开发 第22张

2、spinner:在执行代码块时临时显示一条消息。

import timewith st.spinner('Wait for it...'):    time.sleep(5)st.success('Done!')st.balloons()就算你不会 Web 开发,也能让数据“动”起来的开源项目  web开发 第23张

3、其他

就算你不会 Web 开发,也能让数据“动”起来的开源项目  web开发 第24张

2.2.8 性能优化就算你不会 Web 开发,也能让数据“动”起来的开源项目  web开发 第25张

Streamlit 使用 @st.cache 装饰器使得页面能够快速“无痕”刷新。当我们给函数打上 cache 标记时,Streamlit 在碰到该函数的时候会检查三个值:函数名称、函数体、输入参数。如果发现这三个值的组合第一次出现,则会运行函数,并且将结果存储在本地缓存中。当下次调用该函数时,如果这三个值没有改变,则 Streamlit 会跳过函数执行,直接读取本地缓存返回结果。

@st.cachedef HelloGitHub(url):    # 返回相应数据    return data# 第一次遇到,执行该函数d1 = HelloGitHub(DATA_URL_1)# 传入参数一致,第二次遇到不会执行该函数# 而会直接返回前一次计算的结果,d1 = d2d2 = HelloGitHub(DATA_URL_1)# 传入参数不同,重新执行该函数d3 = HelloGitHub(DATA_URL_2)2.2.9 布局设置1、将交互小部件放入侧边栏。

add_selectbox = st.sidebar.selectbox(    "Which one?",    ("C++", "Java", "Python"))就算你不会 Web 开发,也能让数据“动”起来的开源项目  web开发 第26张

2、表单 st.form():将元素与“提交”按钮一起处理。

# 向表单插入元素with st.form("my_form1"):    st.write("我在 1 框框里~")    slider_val = st.slider("框框滑块")    checkbox_val = st.checkbox("pick me")    # Every form must have a submit button.    submitted = st.form_submit_button("1-Submit")# 乱序插入元素form = st.form("my_form2")form.slider("我在 2 框框里~")st.slider("我在外面")# Now add a submit button to the form:form.form_submit_button("2-Submit")就算你不会 Web 开发,也能让数据“动”起来的开源项目  web开发 第27张

3、插入列并排的容器

# 官方示例col1, col2, col3 = st.beta_columns(3)with col1:    st.header("A cat")    st.image("。

2、Windows 系统可以在 %userprofile%/.streamlit/config.toml 全局文件下或者在当前运行 Streamlit 的文件夹下建立 .streamlit/config.toml 文件进行设置。

3、某些配置例如外观、主题等点击网页上的 Settings 也可轻松选择。

就算你不会 Web 开发,也能让数据“动”起来的开源项目  web开发 第28张

2.4 在 Streamlit sharing 上部署、管理和共享1、将自己的项目代码上传到 GitHub 的共有仓库,添加需求文件以管理任何外部依赖项,例如 requirements.txt 等。

2、在 !」。收到邀请电子邮件后,即可使用该平台部署管理。

3、选择 New app 在 Deploy an app 中填入相应信息即可。

就算你不会 Web 开发,也能让数据“动”起来的开源项目  web开发 第29张

4、若应用程序有很多依赖项,则第一次部署可能需要一些时间,最终应用程序可以使用如下链接访问:

框架的基本接口和用法都已经讲完啦!更多详情还需要友友们在实践中探索,并将指令成功“嵌入”到自己的项目中。

很多命令在文档的「API cheat sheet」中都可以快速搜索到,希望很快就能够在 Streamlit Gallery 上看到大家分享的应用,可以留言给我地址我会去把玩的~。

最后,您的关注和宝贵三连「收藏、点赞、转发」,是对我们 HelloGitHub 莫大的支持,我们将会为您源源不断推送新鲜、有趣的开源项目。

HelloGitHub 分享 GitHub 上有趣、入门级的开源项目。

评论列表暂无评论
发表评论
微信