3.3 页面在用户界面中的标签和排序方式 📑🔢
页面在侧边栏用户界面中的标签是根据文件名生成的。现在我们来学习一下构成页面有效文件名的要素,页面如何显示在侧边栏中,以及页面如何排序。
下表展示了文件名示例及其在侧边栏中的标签,按照它们在侧边栏中出现的顺序进行排序。
文件名 | 显示标签 |
1 - first page.py | first page |
12 monkeys.py | monkeys |
123.py | 123 |
123_hello_dear_world.py | hello dear world |
_12 monkeys.py | 12 monkeys |
⭐小贴士: 你可以使用表情符号使页面名称更有趣!例如,名为 🏠_Home.py 的文件将在侧边栏中创建一个名为 “🏠 Home” 的页面。
3.4 现在我们来实现一个多页面应用
1.在与入口文件(Hello.py)相同的目录中创建一个新的文件夹,命名为 pages。
2.将我们的入口文件重命名为 Hello.py,这样在侧边栏中的标题将被大写。
3.在刚创建的 pages 文件夹中,创建三个新的文件:
pages/1_📈_Plotting_Demo.py
pages/2_🌍_Mapping_Demo.py
pages/3_📊_DataFrame_Demo.py
4.运行以下命令,以查看您新转换的多页应用程序:
streamlit run Hello.py
Hello.py
import streamlit as st st.set_page_config( page_title="你好", page_icon="👋", ) st.write("# 欢迎使用 Streamlit! 👋") st.sidebar.success("在上方选择一个演示。") st.markdown( """ Streamlit 是一个专为机器学习和数据科学项目而构建的开源应用框架。 **👈 从侧边栏选择一个演示**,看看 Streamlit 能做什么吧! ### 想了解更多吗? - 查看 [streamlit.io](https://streamlit.io) - 阅读我们的 [文档](https://docs.streamlit.io) - 在我们的 [社区论坛](https://discuss.streamlit.io) 提问 ### 查看更复杂的示例 - 使用神经网络来 [分析 Udacity 自动驾驶汽车图像数据集](https://github.com/streamlit/demo-self-driving) - 探索一个 [纽约市乘车数据集](https://github.com/streamlit/demo-uber-nyc-pickups) """ )
pages/1_📈_Plotting_Demo.py
import streamlit as st import time import numpy as np st.set_page_config(page_title="绘图演示", page_icon="📈") st.markdown("# 绘图演示") st.sidebar.header("绘图演示") st.write( """这个演示展示了 Streamlit 的绘图和动画组合。我们在一个循环中生成一些随机数大约5秒钟。希望你喜欢!""" ) progress_bar = st.sidebar.progress(0) status_text = st.sidebar.empty() last_rows = np.random.randn(1, 1) chart = st.line_chart(last_rows) for i in range(1, 101): new_rows = last_rows[-1, :] + np.random.randn(5, 1).cumsum(axis=0) status_text.text("完成%i%%" % i) chart.add_rows(new_rows) progress_bar.progress(i) last_rows = new_rows time.sleep(0.05) progress_bar.empty() # Streamlit 的部件会自动按顺序运行脚本。由于此按钮与任何其他逻辑都没有连接,因此它只会引起简单的重新运行。 st.button("重新运行")
pages/2_🌍_Mapping_Demo.py
import streamlit as st import pandas as pd import pydeck as pdk from urllib.error import URLError st.set_page_config(page_title="Mapping Demo", page_icon="🌍") st.markdown("# Mapping Demo") st.sidebar.header("Mapping Demo") st.write( """This demo shows how to use [`st.pydeck_chart`](https://docs.streamlit.io/library/api-reference/charts/st.pydeck_chart) to display geospatial data.""" ) @st.cache_data def from_data_file(filename): url = ( "http://raw.githubusercontent.com/streamlit/" "example-data/master/hello/v1/%s" % filename ) return pd.read_json(url) try: ALL_LAYERS = { "Bike Rentals": pdk.Layer( "HexagonLayer", data=from_data_file("bike_rental_stats.json"), get_position=["lon", "lat"], radius=200, elevation_scale=4, elevation_range=[0, 1000], extruded=True, ), "Bart Stop Exits": pdk.Layer( "ScatterplotLayer", data=from_data_file("bart_stop_stats.json"), get_position=["lon", "lat"], get_color=[200, 30, 0, 160], get_radius="[exits]", radius_scale=0.05, ), "Bart Stop Names": pdk.Layer( "TextLayer", data=from_data_file("bart_stop_stats.json"), get_position=["lon", "lat"], get_text="name", get_color=[0, 0, 0, 200], get_size=15, get_alignment_baseline="'bottom'", ), "Outbound Flow": pdk.Layer( "ArcLayer", data=from_data_file("bart_path_stats.json"), get_source_position=["lon", "lat"], get_target_position=["lon2", "lat2"], get_source_color=[200, 30, 0, 160], get_target_color=[200, 30, 0, 160], auto_highlight=True, width_scale=0.0001, get_width="outbound", width_min_pixels=3, width_max_pixels=30, ), } st.sidebar.markdown("### Map Layers") selected_layers = [ layer for layer_name, layer in ALL_LAYERS.items() if st.sidebar.checkbox(layer_name, True) ] if selected_layers: st.pydeck_chart( pdk.Deck( map_style="mapbox://styles/mapbox/light-v9", initial_view_state={ "latitude": 37.76, "longitude": -122.4, "zoom": 11, "pitch": 50, }, layers=selected_layers, ) ) else: st.error("Please choose at least one layer above.") except URLError as e: st.error( """ **This demo requires internet access.** Connection error: %s """ % e.reason )
pages/3_📊_DataFrame_Demo.py
import streamlit as st import pandas as pd import altair as alt from urllib.error import URLError st.set_page_config(page_title="DataFrame Demo", page_icon="📊") st.markdown("# DataFrame Demo") st.sidebar.header("DataFrame Demo") st.write( """This demo shows how to use `st.write` to visualize Pandas DataFrames. (Data courtesy of the [UN Data Explorer](http://data.un.org/Explorer.aspx).)""" ) @st.cache_data def get_UN_data(): AWS_BUCKET_URL = "http://streamlit-demo-data.s3-us-west-2.amazonaws.com" df = pd.read_csv(AWS_BUCKET_URL + "/agri.csv.gz") return df.set_index("Region") try: df = get_UN_data() countries = st.multiselect( "Choose countries", list(df.index), ["China", "United States of America"] ) if not countries: st.error("Please select at least one country.") else: data = df.loc[countries] data /= 1000000.0 st.write("### Gross Agricultural Production ($B)", data.sort_index()) data = data.T.reset_index() data = pd.melt(data, id_vars=["index"]).rename( columns={"index": "year", "value": "Gross Agricultural Product ($B)"} ) chart = ( alt.Chart(data) .mark_area(opacity=0.3) .encode( x="year:T", y=alt.Y("Gross Agricultural Product ($B):Q", stack=None), color="Region:N", ) ) st.altair_chart(chart, use_container_width=True) except URLError as e: st.error( """ **This demo requires internet access.** Connection error: %s """ % e.reason )
4 结语
至此,两种streamlit的多页面的方案介绍完毕,感谢您阅读本篇博文!如果您对数据可视化和交互式应用程序感兴趣,我们邀请您关注我们的博客,以获取更多关于 Streamlit 和数据科学的有趣内容。您可以在我们的网站上了解更多细节,并发现更多有趣的示例和应用。
让我们一起探索数据世界的魅力,让数据在 Streamlit 的引领下展现出令人惊叹的效果!📈🚀
感谢您的阅读和关注!