目录
1. 前言
为了进一步使用streamlit进行安全开发,通过对streamlit的中文文档进行学习,通过博文对自己学习和过程中的笔记以及遇到的问题进行记录,本篇是对上篇的续篇,是完整篇
在进行学习之前,因之前常用PyCharm进行python的编写,但是编写此类web应用的时候感觉过于繁琐与不便,因此就用vscode来做替代吧
2. 数据展示与样式
下面是文档中的一些实例,可以快速帮助我们熟悉Streamlit应用的一些基本语法和处理,当然基本上还是一写第三方库的使用,熟悉的话学起来就很简单了
在Streamlit应用中，有几种展示数据（如表格、数组、数据帧）的方法。下面将介绍魔法命令（magic）和st.write()，它们可以用来书写从文本到表格的任何内容。之后，我们将探讨专为数据可视化设计的方法。
1.1 使用魔法命令¶
你也可以不调用任何Streamlit方法来向应用写入内容。Streamlit支持所谓的“魔法命令”，这意味着你不必使用st.write()。下面的代码段展示了这一点：
下面就是使用了pandas库,进行了创建了表格,其中按照json格式或是叫python中的字典格式也行
"""
# 我的第一个应用
这是我们首次尝试使用数据创建表格：
"""
import streamlit as st # type: ignore #
import pandas as pd # type: ignore
df = pd.DataFrame({
'第一列': [1, 2, 3, 4],
'第二列': [10, 20, 30, 40]
})
df 每当Streamlit看到一个变量或字面值独立成行时，它就会自动使用st.write()将内容写入你的应用。想了解更多，请参考magic命令的文档。
1.2 写入数据帧
除了魔法命令，st.write()是Streamlit的“瑞士军刀”。几乎任何内容都可以传递给st.write()：文本、数据、Matplotlib图形、Altair图表等等。放心，Streamlit会识别并正确渲染这些内容。
代码基本和上面一致,但是是通过st.write()进行写入到web页面的
import streamlit as st
import pandas as pd
st.write("这是我们首次尝试使用数据创建表格：")
st.write(pd.DataFrame({
'第一列': [1, 2, 3, 4],
'第二列': [10, 20, 30, 40]
}))
1.3 为什么不会一直使用st.write()？
有几个原因：
- 魔法 和
st.write()会检查你传递的数据类型，然后决定如何最好地在应用中呈现它。有时你可能想要用另一种方式展示。例如，与其将数据框作为交互式表格绘制，你可能希望通过使用st.table(df)将其绘制为静态表格。 - 第二个原因是，其他方法返回的对象可以被使用和修改，无论是通过向其添加数据还是替换数据。
- 最后，如果你使用了更具体的Streamlit方法，你可以传递额外的参数来自定义它的行为。
1.4 小例子
创建一个数据框并使用Pandas的Styler对象改变其格式。在这个例子中，使用Numpy第三方库生成随机样本，并使用st.dataframe()方法绘制一个交互式表格。
其中 np.random.randn(10, 20) 生成了一个包含 10 行和 20 列的二维数组，数组中的数值来自标准正态分布（均值为 0，标准差为 1）。
import streamlit as st # type: ignore #
import numpy as np # type: ignore #
dataframe = np.random.randn(10, 20)
st.dataframe(dataframe)
让我们基于第一个例子进一步操作，使用Pandas的Styler对象来突出显示交互式表格中的某些元素。
其中数据的创建还是使用numpy库的方法进行创建.其中通过columns=('列%d' % i for i in range(20))设置数据框的列名为“列0”到“列19”。 看不懂的话,其中for循环使用的列表推导式,之前我有写过列表推导式的使用,感兴趣的话可以看看,然后就是使用了占位符将列表推导式,也就是每次循环的数据,在每一列进行展示.
其中dataframe.style.highlight_max(axis=0)是Pandas的一个方法链，用于给数据框添加样式。这里highlight_max函数用于突出显示每一列中的最大值。参数axis=0指定了函数是沿着列的方向（垂直方向）查找最大值。
import streamlit as st
import numpy as np
import pandas as pd
dataframe = pd.DataFrame(
np.random.randn(10, 20),
columns=('列%d' % i for i in range(20)))
st.dataframe(dataframe.style.highlight_max(axis=0))
Streamlit还提供了一个生成静态表格的方法：st.table()。
import streamlit as st # type: ignore #
import numpy as np # type: ignore #
import pandas as pd # type: ignore #
dataframe = pd.DataFrame(
np.random.randn(10, 20),
columns=('列%d' % i for i in range(20)))
st.table(dataframe)
1.5 绘制图表和地图¶
Streamlit支持多种流行的数据图表库，如Matplotlib、Altair、deck.gl等Matplotlib、Altair、deck.gl等Matplotlib、Altair、deck.gl等。
1.6 绘制折线图¶
你可以使用st.line_chart()轻松地向应用中添加折线图。我们将使用Numpy生成随机样本，然后绘制图表。
import streamlit as st # type: ignore #
import numpy as np # type: ignore #
import pandas as pd # type: ignore #
chart_data = pd.DataFrame(
np.random.randn(20, 3),
columns=['A', 'B', 'C'])
st.line_chart(chart_data) 唯一要说的就是,这里是将创建的20行三列的数据转换为A,B,C三条折线了
1.7 绘制地图¶
通过st.map()，你可以在地图上显示数据点。让我们使用Numpy生成一些样本数据，并在旧金山的地图上绘制它。
这里因为文档中给出代码出现错误,因此我做了一些修改,让其更为逼真一点,用真实数据模拟
import streamlit as st
import numpy as np
import pandas as pd
# 使用均匀分布生成随机数，集中在旧金山附近
map_data = pd.DataFrame(
np.random.uniform([-122.4, 37.76], [122.7, 37.4], [1000, 2]), # 旧金山附近的经纬度范围
columns=['LONGITUDE', 'LATITUDE']) # 使用Streamlit认可的列名
# 使用st.map函数展示地图
st.map(map_data)
1.8 小部件¶
当你将数据或模型调整到想要探索的状态时， 你可以添加诸如st.slider()、st.button()或st.selectbox()这样的小部件。这非常直接——将小部件视为变量处理：
其实就是上篇中的数据流中所说的,改变输入的数据流,代码会重新运行一次
import streamlit as st
x = st.slider('x 的值') # 👈 这是一个小部件(滑动条)
st.write(x, '的平方是', x * x)
首次运行该应用时，应该输出文本 "0 的平方是 0"。然后，每当用户与小部件交互时，Streamlit 会简单地从头到尾重新运行你的脚本，在此过程中将小部件的当前状态赋值给你的变量。例如，如果用户将滑块移动到位置 10，Streamlit 将重新运行上面的代码，并相应地将 x 设置为 10。现在你应该看到文本 "10 的平方是 100"。如果你选择指定一个字符串作为小部件的唯一键，小部件也可以通过键来访问：
import streamlit as st # type: ignore
st.text_input("你的名字", key="姓名") # 文本输入框
# 你可以随时通过以下方式访问这个值：
st.session_state.姓名 # 通过key值访问
1.8.1 使用复选框显示/隐藏数据¶
复选框的一个应用场景是在应用中隐藏或显示特定的图表或部分。st.checkbox()接受单个参数，即小部件标签。在这个示例中，复选框用于切换条件语句。
import streamlit as st # type: ignore
import numpy as np # type: ignore
import pandas as pd # type: ignore
if st.checkbox('显示数据框'):
chart_data = pd.DataFrame(
np.random.randn(20, 3),
columns=['a', 'b', 'c'])
chart_data 这里是将st.checkbox()接受单个参数,并作为true或false来进行判断真假,来判断是否进行赋值从而显示或隐藏表格
1.8.2 使用下拉选择框进行选项选择¶
使用st.selectbox从一系列选项中进行选择。你可以直接写出你想要的选项，或者传递一个数组或数据框列。
让我们使用之前创建的df数据框。
import streamlit as st # type: ignore
import pandas as pd # type: ignore
df = pd.DataFrame({
'第一列': [1, 2, 3, 4],
'第二列': [10, 20, 30, 40]
})
option = st.selectbox(
'你最喜欢哪个数字？',
df['第一列'])
'你选择了: ', option可以对选择的列表中的第一列中的数据进行选择,并进行展示
1.9 布局¶
Streamlit 通过st.sidebar轻松地将你的小部件组织在左侧的侧边栏中。传递给st.sidebar的每个元素都会固定在左侧，使用户能够在专注于应用内容的同时仍能访问UI控件。
例如，如果你想在侧边栏中添加一个下拉选择框和一个滑块，使用st.sidebar.slider和st.sidebar.selectbox，而不是st.slider和st.selectbox：
import streamlit as st # type: ignore
# 向侧边栏添加一个下拉选择框：
add_selectbox = st.sidebar.selectbox(
'您希望如何被联系？',
('电子邮件', '家庭电话', '移动电话')
)
# 向侧边栏添加一个滑块：
add_slider = st.sidebar.slider(
'选择一个数值范围',
0.0, 100.0, (25.0, 75.0)
)这种设计方式还是很人性化的,并且在下拉框中和滑块中指定数据/数据类型
除了侧边栏外，Streamlit 还提供了几种其他方式来控制应用的布局。st.columns允许你将小部件并排放置，而st.expander则可以通过隐藏大量内容来节省空间。
import streamlit as st
left_column, right_column = st.columns(2)
# 你可以像对待 st.sidebar 一样使用一个列：
left_column.button('点击我！')
# 或者更好的是，在一个 "with" 块中调用 Streamlit 函数：
with right_column:
chosen = st.radio(
'分院帽',
("格兰芬多", "拉文克劳", "赫奇帕奇", "斯莱特林"))
st.write(f"你被分配到了{chosen}学院！")左边这个就是可以通过点击任意一个个例来进行使用,右侧就是类似html代码中的单选框指定了多个值,其中{}就是python格式中的占位符,模板字符串,引号前需要用f
显示进度
当向应用中添加长时间运行的计算时，可以使用st.progress()实时显示状态。下面就是展示一个动态执行,,并更新数据的迭代进度条
import streamlit as st # type: ignore
import time
'开始一个长时间的计算...'
# 添加一个占位符
latest_iteration = st.empty() # 迭代文字
bar = st.progress(0)
for i in range(100):
# 每次迭代更新进度条。
latest_iteration.text(f'第 {i+1} 次迭代') # 可以实时更新数据
bar.progress(i + 1)
time.sleep(0.1)
'...现在我们完成了！'这段代码比较容易理解,通过占位符来为不断更新的文字进行占位, latest_iteration.text(f'第 {i+1} 次迭代') 可以实时更新数据,类似与Vue中的双向绑定
1757
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
