构建可视化 web的 Python 神器streamlit_python_

前言：

今天要介绍这个神器，可以说是  pywebio  的 Plus  + Pro  + Max  版，原谅我的词穷，但它真的非常的强～ 
正常在学习一个新框架之前， 肯定要先调研下这个框架究竟能做些什么事吧？

但对于 streamlit 来说，请你相信我，这是一个你可以无脑去学习的框架，我之所以这么说，是因为我相信终有一天，你一定能用得上它。

Streamlit 是一个用于机器学习、数据可视化的 Python 框架，它能几行代码就构建出一个精美的在线 app 应用。

它能做什么，取决于你想干什么？

streamlit 的功能强大，要学习的函数虽然多，但非常容易上手，学习成本却远比 前端+Flask 来得低得低。接下来，我会一一介绍。

1. 如何安装？

和安装其他包一样，安装 streamlit 非常简单，一条命令即可

➜ pip install streamlit 

考虑到 streamlit 会附带安装比较多的工具依赖包，为了不污染当前的主要环境，我使用 venv 新建一个虚拟环境。

➜ python3 -m venv .

然后使用如下命令进入该虚拟环境

➜ source ./venv/bin/activate

接下来，再安装 streamlit ，命令在上边。

安装的包比较多（数了下竟然接近 92 个？），过程也会很久，需要点耐心

➜ pip list | wc -l       92

在安装过程中，可能会遇到一些问题，但也不一定，这取决于你的机器，如遇到问题请自行借助搜索引擎解决。

2. 入门示例

Streamlit 提供了一些入门示例，执行如下命令即可

➜ streamlit hello

执行后 streamlit 会自动打开浏览器加载一个本地页面 http://localhost:8501/

这里面有很多的 demo，你可以看一下，这些 Demo 还有对应的配套代码

这些代码直接拷贝保存，就可以在本地直接通过如下命令直接运行

➜ streamlit run st-demo.py

2. Markdown 文本

导入 streamlit 后，就可以直接使用 st.markdown() 初始化，调用不同的方法，就可以往文档对象中填入内容

• st.title()：文章大标题
• st.header()：一级标题
• st.subheader()：二级标题
• st.text()：文本
• st.code()：代码，同时可设置代码的语言，显示的时候会高亮
• st.latex()：latex 公式
• st.caption()：小字体文本

如下我自己写的一个小 Demo，供参考

import streamlit as st # markdown st.markdown('Streamlit Demo') # 设置网页标题 st.title('一个傻瓜式构建可视化 web的 Python 神器 -- streamlit') # 展示一级标题 st.header('1. 安装') st.text('和安装其他包一样，安装 streamlit 非常简单，一条命令即可') code1 = '''pip3 install streamlit''' st.code(code1, language='bash') # 展示一级标题 st.header('2. 使用') # 展示二级标题 st.subheader('2.1 生成 Markdown 文档') # 纯文本 st.text('导入 streamlit 后，就可以直接使用 st.markdown() 初始化') # 展示代码，有高亮效果 code2 = '''import streamlit as st st.markdown('Streamlit Demo')''' st.code(code2, language='python')

Streamlit 运行的方式 与普通的脚本 有所不同，应该使用 streamlit run st-demo.py

运行后就会自动打开浏览器加载这个页面，如果没有自动打开，也可以手动拷贝上图中的链接打开访问。

是不是有点那个味了？就这，还只是开胃菜～

3. 数据图表支持

3.1 图表组件

关于数据的展示，streamlit 由两个组件进行支持

• table：普通的表格，用于静态数据的展示
• dataframe：高级的表格，可以进行数据的操作，比如排序

Table 的示例：

df = pd.DataFrame(     np.random.randn(10, 5),     columns=('第%d列' % (i+1) for i in range(5)) ) st.table(df)

效果如下：

Datafram 的示例：

df = pd.DataFrame(     np.random.randn(10, 5),     columns=('第%d列' % (i+1) for i in range(5)) ) st.dataframe(df.style.highlight_max(axis=0))

效果如下，可以看到在图示外，有个向下的小箭头，你点一下，就会进行排序，除此之外，你还能看到我对最大值进行了高亮显示，原因是我传入的参数是 df.style.highlight_max(axis=0)

其实还有 n 多种样式，比如：

• highlight_null：空值高亮
• highlight_min：最小值高亮
• highlight_max：最大值高亮
• highlight_between：某区间内的值高亮
• highlight_quantile：暂没用过

这些你都可以在源代码中找到示例

3.2 监控组件

在采集到一些监控数据后，若你需要做一个监控面板， streamlit 也为你提供的 metric 组件

如下代码创建 三个指标，并且填入对应的数据

col1, col2, col3 = st.columns(3) col1.metric("Temperature", "70 °F", "1.2 °F") col2.metric("Wind", "9 mph", "-8%") col3.metric("Humidity", "86%", "4%")

刷新页面，就能看到下面的效果：

3.3 原生图表组件

Streamlit 原生支持多种图表：

• st.line_chart：折线图
• st.area_chart：面积图
• st.bar_chart：柱状图
• st.map：地图

下面一一展示

折线图

chart_data = pd.DataFrame(     np.random.randn(20, 3),     columns=['a', 'b', 'c']) st.line_chart(chart_data)

面积图

chart_data = pd.DataFrame(     np.random.randn(20, 3),     columns = ['a', 'b', 'c']) st.area_chart(chart_data)

柱状图

chart_data = pd.DataFrame(     np.random.randn(50, 3),     columns = ["a", "b", "c"]) st.bar_chart(chart_data)

地图

df = pd.DataFrame(     np.random.randn(1000, 2) / [50, 50] + [37.76, -122.4],     columns=['lat', 'lon'] ) st.map(df)

3.4 外部图表组件

Streamlit 的一些原生图表组件，虽然做到了傻瓜式，但仅能输入数据、高度和宽度，如果你想更漂亮的图表，就像 matplotlib.pyplot、Altair、vega-lite、Plotly、Bokeh、PyDeck、Graphviz 那样，streamlit 也提供了支持：

• st.pyplot
• st.bokeh_chart
• st.altair_chart
• st.altair_chart
• st.vega_lite_chart
• st.plotly_chart
• st.pydeck_chart
• st.graphviz_chart

对于这部分，熟悉的同学自行尝试了，这里不再演示。

4. 用户操作支持

前面 streamlit 都只是展示文本和数据，如果仅是如此，那 streamlit 也就 just so so

对于那些不会前端，并且平时有需要写一些简单的页面的人说，能写一些交互界面才是硬需求。

庆幸的是，你平时在网页上、app 上能看到的交互组件，Streamlit 几乎都能支持。。

• button：按钮
• download_button：文件下载
• file_uploader：文件上传
• checkbox：复选框
• radio：单选框
• selectbox：下拉单选框
• multiselect：下拉多选框
• slider：滑动条
• select_slider：选择条
• text_input：文本输入框
• text_area：文本展示框
• number_input：数字输入框，支持加减按钮
• date_input：日期选择框
• time_input：时间选择框
• color_picker：颜色选择器

这些内容非常多，也比较简单，一个一个举例也没必要，大家直接去看 streamlit 源码里的注释即可。

5. 多媒体组件

想要在页面上播放图片、音频和视频，可以使用 streamlit 的这三个组件：

• st.image
• st.audio
• st.video

6. 状态组件

状态组件用来向用户展示当前程序的运行状态，包括：

• progress：进度条，如游戏加载进度
• spinner：等待提示
• balloons：页面底部飘气球，表示祝贺
• error：显示错误信息
• warning：显示报警信息
• info：显示常规信息
• success：显示成功信息
• exception：显示异常信息（代码错误栈）

效果如下：

7. 页面布局

Streamlit 是自上而下渲染的，组件在页面上的排列顺序与代码的执行顺序一致。

一个精美的 web app ，只有上下单栏式的布局肯定是不够的。

实际上 streamlit 还提供了多种多样的布局：

st.sidebar：侧边栏

侧边栏可以做一些用户操作控件

• st.columns：列容器，处在同一个 columns 内组件，按照从左至右顺序展示
• st.expander：隐藏信息，点击后可展开展示详细内容，如：展示更多
• st.container：包含多组件的容器
• st.empty：包含单组件的容器
提示： 本文由神整理自网络，如有侵权请联系本站删除！
本站声明：
1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！

上一篇：利用Python连接Oracle数据库的基本操作指南_python_

下一篇：python反反爬虫技术限制连续请求时间处理_python_