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

2022年 11月 9日

作者 | 俊欣

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

今天我们用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 style
        st.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 log
        st.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 file
    st.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/text
    uploaded_file = st.file_uploader('',type=['csv']) #Only accepts csv file format
    if 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 datafame
        grid_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('感谢!')