在开发大型应用时,将内容分割到不同的网页中是十分必要的。Streamlit提供了多种方式来实现这一点,包括使用st.selectbox
或st.radio
组件。最近,Streamlit引入了一种新的技术,使得创建多页应用变得更加高效。本文将探讨Streamlit多页功能的所有细节,包括如何使用它以及它的优缺点。将从本文中学到许多东西,所以请泡一杯茶,慢慢阅读。
要创建Streamlit的多页应用,需要维护一个项目结构。需要创建一个名为pages
的目录,并将所有包含设计网页代码的Python文件放入此文件夹中,除了主脚本。下图将更清楚地说明这一点。
项目目录结构如下:
my_app
├── my_app.py <-- 主脚本
└── pages
├── page_no_2.py <-- 第二页!
└── page_no_3.py <-- 第三页!
要运行应用,只需要运行主脚本:
streamlit run my_app.py
现在有一个问题——该如何安排网页?Streamlit会根据在pages
目录中的Python文件位置来排序页面。也可以通过在文件名中添加页码和下划线来指定页面的顺序,如下所示:
my_app
├── my_app.py <-- 主脚本
└── pages
├── 02_page_no_2.py <-- 新的第二页!
└── 03_page_no_3.py
让通过一个演示来更好地理解。这里正在为黑巧克力分析制作一个仪表板。如果想知道分析是如何进行的,可以点击。本文只使用Streamlit制作仪表板。记住在Tableau中是如何制作故事的吗?添加工作表或仪表板到故事中,然后通过点击顶部的标签来导航。看看下面的GIF,就会明白意思。
在Streamlit中,将构建与GIF中描述的相同结构。不是添加工作表或仪表板,而是添加Python文件。确信现在已经明白将在这里构建什么了。那么,让开始吧!
在查看可视化之前,每个人都想知道问题是什么以及在分析中取得了什么成果。所以,在主页面让他们知道这一点。以下是main_page.py
文件的代码。
import streamlit as st
st.title("寻找最佳巧克力 🍫")
st.write("""在这里,将通过分析一个包含来自不同国家的2500多块纯黑巧克力评分的数据集来展示发现。数据集从[这里](http://flavorsofcacao.com/chocolate_database.html)收集。""")
st.markdown(
"""
### 💾 数据:
**列名**|**描述**
-----|-----
|ref| 评论的编号|
|Company (Manufacturer)| 巧克力条制造商的名称|
|Company Location| 制造商的位置|
|Review Date| 从2006年到2021年|
|Country of Bean Origin| 可可豆的原产国|
|Specific Bean Origin or Bar Name| 巧克力条的名称|
|Cocoa Percentage| 巧克力条的可可含量 (%)|
|Ingredients| B (豆), S (糖), S* (除糖或甜菜糖以外的甜味剂), C(可可脂), (V) 香草, (L) 卵磷脂, (Sa) 盐
|Most Memorable Characteristics| 巧克力条最难忘的特点总结
|Ratings| 1.0-1.9 不愉快,2.0-2.9 令人失望,3.0-3.49 推荐,3.5-3.9 高度推荐,4.0-5.0 杰出
"""
)
st.text("")
st.markdown(
"""
### 💪 挑战:
##### 在这里创建一个报告,总结研究,包括:
- 原产国的平均评分是多少?
- 这些国家各自评审了多少块巧克力?
- 哪块巧克力获得了好的平均评分?
- 哪家制造商获得了好的平均评分?
- 可可含量与评分的关系如何?评分高于3.5的巧克力条的平均可可含量是多少?
- 研究表明,一些消费者想要避免含有卵磷脂的巧克力条。
比较含有和不含有卵磷脂(L在成分中)的巧克力条的平均评分。
"""
)
st.set_page_config(page_title="主页面", page_icon="🍫")
在这里使用了一些表情符号,使网站更具吸引力。根据用例制作了这个页面。建议自己尝试,而不是完全复制代码,以获得更好的理解。如果再次运行上述代码,会在主页面看到下面的输出。
现在让在第二页创建一个仪表板。在这里,使用PlotlyPython库进行交互式可视化。也可以使用其他库,如Matplotlib,但建议使用Plotly,因为这个库使图表更具吸引力,并且使这些图表更加可定制。
没有在这些页面上包含所有代码。为可视化代码创建了一个单独的文件,以便代码看起来更干净,在编辑时可以更容易地进行。在这里不解释可视化,因为本文的主要目的是解释Streamlit中的多页应用。如果想了解更多,请查看代码。在这里实现了所有功能。
以下是第二页的代码。
import streamlit as st
from functions import FirstPageFuncs
st.set_page_config(layout='wide', page_title='最佳巧克力', page_icon='🤗')
st.title("哪块巧克力有好的平均评分,以及那块巧克力的特点是什么?")
st.write(
"""
在这里,发现哪块巧克力条获得了最高的平均评分。还发现为什么这块巧克力如此受欢迎。
"""
)
col_0_0, col_0_1 = st.columns([1.25, 1])
col_1_0, col_1_1 = st.columns([1, 1])
fpf = FirstPageFuncs()
figure_1 = fpf.best_chocolates()
figure_2 = fpf.most_common_company_location()
figure_3 = fpf.most_commonly_used_ingredients()
figure_4 = fpf.most_memorable_taste()
col_0_0.plotly_chart(figure_1, use_container_width=True)
col_0_1.plotly_chart(figure_2, use_container_width=True)
col_1_0.plotly_chart(figure_3, use_container_width=True)
col_1_1.plotly_chart(figure_4, use_container_width=True)
st.markdown(
"""
从上述结果中,可以清楚地看到,名为**Kokoa Kamili**的巧克力获得了最高的平均评分(左上)。这种巧克力大多在美国制造(右上),最常用的成分是**豆,糖和可可脂**。有时,不使用**可可脂**(左下)。这种巧克力主要是因为其**果味**而受欢迎(右下)。
"""
)