2022年 11月 9日

用 Python 制作数据大屏,超简单

499c2594a941234d8fb2879368c67ab1.gif

作者 | 俊欣

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

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

f539617a0cb4cc023e8807442343513a.png

制作工具栏

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

812b669218619c7f43e79cca44a77bde.gif

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

  • menu_title:工具栏的标题,必填

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

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

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

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

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

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

主页面的设计

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

  1. logo = Image.open(r'952.png')
  2. profile = Image.open(r'5052.png')
  3. if choose == "About":
  4.     col1, col2 = st.columns([0.80.2])
  5.     with col1:  # To display the header text using css style
  6.         st.markdown(""" <style> .font {
  7.         font-size:35px ; font-family: 'Cooper Black'; color: #FF9633;} 
  8.         </style> """, unsafe_allow_html=True)
  9.         st.markdown('<p class="font">简介</p>', unsafe_allow_html=True)
  10.     with col2:  # To display brand log
  11.         st.image(logo, width=130)
  12.     st.write(
  13.         "介绍......")
  14.     st.image(profile, width=700)

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

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

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

dd64b84047d198da8270fe5b1d395943.gif

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

05dcc76e62fe5f6de21503789e4dbfe4.gif

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

  1. elif choose=='App':
  2.     #Add a file uploader to allow users to upload their csv file
  3.     st.markdown(""" <style> .font {
  4.     font-size:25px ; font-family: 'Cooper Black'; color: #FF9633;} 
  5.     </style> """, unsafe_allow_html=True)
  6.     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/text
  7.     uploaded_file = st.file_uploader('',type=['csv']) #Only accepts csv file format
  8.     if uploaded_file is not None:
  9.         df=pd.read_csv(uploaded_file)  #use AgGrid to create a aggrid table that's more visually appealing than plain pandas datafame
  10.         grid_response = AgGrid(
  11.             df,editable=False,
  12.             height=300,fit_columns_on_grid_load=True,
  13.             theme='blue',width=100,
  14.             allow_unsafe_jscode=True,
  15.             )
  16.         updated = grid_response['data']
  17.         df = pd.DataFrame(updated)
  18.         st.write('---')
  19.         st.markdown('<p class="font">Set Parameters...</p>', unsafe_allow_html=True)
  20.         column_list = list(df)
  21.         column_list = deque(column_list)
  22.         column_list.appendleft('-')
  23.         with st.form(key='columns_in_form'):
  24.             text_style = '<p style="font-family:sans-serif; color:red; font-size: 15px;">***These input fields are required***</p>'
  25.             st.markdown(text_style, unsafe_allow_html=True)
  26.             col1, col2, col3 = st.columns([1, 1, 1])
  27.             ......
  28.             col4, col5, col6 = st.columns([1, 1, 1])
  29.             ......
  30.             col7, col8, col9 = st.columns([1, 1, 1])
  31.             ......
  32.             col10, col11, col12 = st.columns([1, 1, 1])
  33.             ......
  34.             submitted = st.form_submit_button('Submit')
  35.             st.write('---')
  36.             if submitted:
  37.                 raceplot = barplot(df, item_column=item_column, value_column=value_column, time_column=time_column,
  38.                                    top_entries=num_items)
  39.                 fig = raceplot.plot(item_label=item_label, value_label=value_label, frame_duration=frame_duration,
  40.                                     date_format=date_format, orientation=orientation)
  41.                 fig.update_layout(......)
  42.                 st.plotly_chart(fig, use_container_width=True)

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

6fd325a447b992230fe47910b3c0d931.png

代码如下:

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

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

c5a285c7f57a477bed1aad4475058151.gif

073ff747932e48e2dc55b4e4d267de0f.png

技术

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

技术

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

技术

快速实现Resnet残差模型实战

资讯

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

963b77c95cfe88a423fca2279032a7ce.png

分享

8599ad4937371e14d4f16a073cb589fa.png

点收藏

cc945861347ac57a9eb7d49335de5fa7.png

点点赞

778355f2c966e1a9f5cf9ea36f1b3c88.png

点在看