作者 | 俊欣

来源 | 关于数据分析与可视化

今天我们用Streamlit模块来制作一个数据面板，将数据更加直观地呈现给别人观看，整个页面大致如下图所示：

制作工具栏

在页面的左侧是一个工具栏，工具栏中有多个按钮，分别是“About”、“Demo”、“App”以及"Contact"这几个，用来切换到不同的页面。

这里主要是通过streamlit_option_menu模块来实现的，我们来调用其中的option_menu函数，我们需要明确里面的几个参数：

• menu_title：工具栏的标题，必填

• options: 规定要有哪几个选项栏，必填

• menu_icon: 每一个选项卡的图标，非必填

• default_index: 默认勾选的选项按钮，一般默认勾选的都是第一个选项按钮

• styles: 每个选项按钮的样式

因此我们要制作的数据面板，工具栏部分的代码如下：

with st.sidebar:choose = option_menu("Main Menu", ["About", "Demo","App", "Contact"],icons=['house', 'file-slides','app-indicator','person lines fill'],menu_icon="list", default_index=0,styles={"container": {"padding": "5!important", "background-color": "#fafafa"},"icon": {"color": "orange", "font-size": "25px"},"nav-link": {"font-size": "16px", "text-align": "left", "margin":"0px", "--hover-color": "#eee"},"nav-link-selected": {"background-color": "#02ab21"},})

主页面的设计

About页面的功能主要是对整个网页的内容、用途做一个简单的介绍，代码逻辑主要是通过if else来判断，例如当我们点击About这个选项的时候。

logo = Image.open(r'952.png')
profile = Image.open(r'5052.png')
if choose == "About":col1, col2 = st.columns([0.8, 0.2])with col1:  # To display the header text using css stylest.markdown(""" <style> .font {font-size:35px ; font-family: 'Cooper Black'; color: #FF9633;} </style> """, unsafe_allow_html=True)st.markdown('<p class="font">简介</p>', unsafe_allow_html=True)with col2:  # To display brand logst.image(logo, width=130)st.write("介绍......")st.image(profile, width=700)

而当我们点击“Demo”这个按钮的时候，该页面的功能主要是通过视频来展示一下该网页的主要功能，播放一段Demo视频，代码如下：

elif choose=='Demo':st.markdown(""" <style> .font {font-size:25px ; font-family: 'Cooper Black'; color: #FF9633;} </style> """, unsafe_allow_html=True)st.markdown('<p class="font">Watch a short demo of the app...</p>', unsafe_allow_html=True)video_file = open('Demo.mp4', 'rb')video_bytes = video_file.read()st.video(video_bytes)

而当我们点击“App”的时候，则主要展示出来的是整个网页的主要功能了，本案例是通过调用raceplotly模块来绘制动态可交互的柱状图，如下图所示

我们首先需要上传数据集，然后设置好呈现出来的图表的属性，例如图表的标题、柱状图的柱间距等等，如下图所示。

最后我们来看一下代码，因为篇幅整体有限，这里就先展示一部分代码：

elif choose=='App':#Add a file uploader to allow users to upload their csv filest.markdown(""" <style> .font {font-size:25px ; font-family: 'Cooper Black'; color: #FF9633;} </style> """, unsafe_allow_html=True)st.markdown('<p class="font">Upload your data...</p>', unsafe_allow_html=True) #use st.markdown() with CSS style to create a nice-formatted header/textuploaded_file = st.file_uploader('',type=['csv']) #Only accepts csv file formatif uploaded_file is not None:df=pd.read_csv(uploaded_file)  #use AgGrid to create a aggrid table that's more visually appealing than plain pandas datafamegrid_response = AgGrid(df,editable=False,height=300,fit_columns_on_grid_load=True,theme='blue',width=100,allow_unsafe_jscode=True,)updated = grid_response['data']df = pd.DataFrame(updated)st.write('---')st.markdown('<p class="font">Set Parameters...</p>', unsafe_allow_html=True)column_list = list(df)column_list = deque(column_list)column_list.appendleft('-')with st.form(key='columns_in_form'):text_style = '<p style="font-family:sans-serif; color:red; font-size: 15px;">***These input fields are required***</p>'st.markdown(text_style, unsafe_allow_html=True)col1, col2, col3 = st.columns([1, 1, 1])......col4, col5, col6 = st.columns([1, 1, 1])......col7, col8, col9 = st.columns([1, 1, 1])......col10, col11, col12 = st.columns([1, 1, 1])......submitted = st.form_submit_button('Submit')st.write('---')if submitted:raceplot = barplot(df, item_column=item_column, value_column=value_column, time_column=time_column,top_entries=num_items)fig = raceplot.plot(item_label=item_label, value_label=value_label, frame_duration=frame_duration,date_format=date_format, orientation=orientation)fig.update_layout(......)st.plotly_chart(fig, use_container_width=True)

当我们对于该应用的功能有什么不满、有什么建议想要联系开发者的话，点击“Contact”按钮，页面如下图所示

代码如下：

elif choose == "Contact":st.markdown(""" <style> .font {font-size:35px ; font-family: 'Cooper Black'; color: #FF9633;} </style> """, unsafe_allow_html=True)st.markdown('<p class="font">Contact Form</p>', unsafe_allow_html=True)with st.form(key='columns_in_form2',clear_on_submit=True): Name=st.text_input(label='姓名') Email=st.text_input(label='联系方式') Message=st.text_input(label='您想要说的是') submitted = st.form_submit_button('提交')if submitted:st.write('感谢!')

至此整个网站就都完成了，大家可以依次来作为模板制作自己的数据大屏，将数据更加直观地展示出来。

往

期

回

顾

技术

Pandas数据类型概述与转换实战

技术

用Python实现十大经典排序算法

技术

快速实现Resnet残差模型实战

资讯

隐患：神经网络可以隐藏恶意软件

分享

点收藏

点点赞

点在看