用 Python 制作数据大屏，超简单
作者 | 俊欣
来源 | 关于数据分析与可视化
今天我们用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残差模型实战
资讯
隐患：神经网络可以隐藏恶意软件
分享
点收藏
点点赞
点在看
相关文章：
Oracle 12C -- 清空audit记录
1.使用job清空 SQL> dbms_audit_mgmt.create_purge_job(audit_trail_type> DBMS_AUDIT_MGMT.AUDIT_TRAIL_UNIFIED,audit_trail_purge_interval>12，audit_trail_purge_name>audit_trail_pj,use_last_arch_timestamp>TRUE,container>dbms_audit_mgm…
魔法引用函数magic_quotes_gpc和magic_quotes_runtime的区别和用法
PHP提供两个方便我们引用数据的魔法引用函数magic_quotes_gpc和magic_quotes_runtime， 这两个函数如果在php.ini设置为ON的时候，就会为我们引用的数据碰到单引号和双引号"是自动加上反斜线，帮我们自动转译符号，确保数据操作的…
Unity脚本生成插件：Script Create Dialog
最近写代码又犯懒了...感觉每次新建脚本都要写一堆简单重复的东西好无聊，所以搜索了一下有没有自动生成脚本的插件。结果还真被我发现了，官方在N久之前就制作了自动生成脚本的插件[Script Create Dialog]，大概是名字起的和脚本生成器相差太多…
多路IO复用模型 select epoll 等
同步阻塞IO在等待数据就绪上花去太多时间，而传统的同步非阻塞IO虽然不会阻塞进程，但是结合轮询来判断数据是否就绪仍然会耗费大量的CPU时间。多路IO复用提供了对大量文件描述符进行就绪检查的高性能方案。selectselect诞生于4.2BSD，在几乎所有…
可操作性强！Python实现一个电影订票系统！
来源丨Python小二一、效果展示通过Python实现一个电影订票系统，效果如下所示：二、整体结构图三、代码分解3.1 infos.py一部电影的详细信息适合用 字典 结构来存储，我们可以给字典里添加多个键值对来保存电影的名称、座位表和宣传时用的字符画…
centos7 install mysql
1. 下载mysql的repo源 $ wget http://repo.mysql.com/mysql-community-release-el7-5.noarch.rpm 2. 安装mysql-community-release-el7-5.noarch.rpm包 $ sudo rpm -ivh mysql-community-release-el7-5.noarch.rpm 安装这个包后，会获得两个mysql的yum repo源&#x…
unity加载ab后，场景shader不起效问题(物件表现黑色)
需要把unity自带的shader，加入到默认列表转载于:https://www.cnblogs.com/lancidie/p/9293827.html
Linux下各类TCP网络服务器的实现源代码
http://www.linuxeden.com/forum/t146870.html大家都知道各类网络服务器程序的编写步骤，并且都知道网络服务器就两大类：循环服务和并发服务。这里附上源代码来个小结吧。首先，循环网络服务器编程实现的步骤是这样的： 这种服务器模…
ReferenceQueue的使用
转：http://www.iflym.com/index.php/java-programe/201407140001.html 1 何为ReferenceQueue 在java的引用体系中，存在着强引用，软引用，虚引用，幽灵引用，这4种引用类型。在正常的使用过程中，我们…
红帽、Docker、SUSE 在俄罗斯停服
国际局势给技术圈带来的影响依然在蔓延。整理 | 苏宓出品 | CSDN（ID：CSDNnews）继 Oracle、Google、苹果等科技公司和 React 开源项目之后，如今 Linux 发行版也牵扯进俄乌之间冲突的漩涡中。其中一个是全球最大的独立开源软件公…
配置linux-Fedora系统下iptables防火墙
参考地址：https://blog.csdn.net/zhangjingyi111/article/details/78902820 本篇文章为实验课过程记录，较为简略。 1.查看系统是否安装iptables 命令：iptables --version 2.开启iptables 命令：service iptables start 出现错误&am…
output_buffering详细介绍
HTTP Header为什么要使用Output Buffering技术Output Buffering的工作原理基本用法高级用法使事情更为简单哈哈，我成功了我个人认为，Output buffering是比较纯粹的PHP4.0特征。尽管从概念上看来相当简单，但是output buffering功能非常强大&am…
12 个 Pandas 数据处理高频操作
作者 | 老表来源 | 简说Python今天给大家分享几个自己近期常用的Pandas数据处理技巧，主打实用，所以你肯定能用的着，建议扫一遍，然后收藏起来，下次要用的时候再查查看即可。简单说说总结分享统计一行/一列数据的负数出现…
ORACLE初次安装自动安装软件包
一、自动安装所需软件包提前配置好yum仓库定义package.txt包列表文件：以官网RHEL6为例，这里有compat-libstdc有两个包，如果不加*，号后面的compat-libstdc-33-3.2.3-69.el6.x86_64，compat-libstdc-296-2.96-144.el6.i68…
中文详解phpmailer所有对象和属性
2019独角兽企业重金招聘Python工程师标准>>> 2009-03-09 19:13:50 前言： phpmailer是一个优秀的发件程序，但中文资料比较少，于是有牛人手动翻译了phpmailer的elementindex.html,E文的：[url]http://www.bblog.com/api…
php error_reporting 详解
error_reporting设定错误讯息回报的等级。语法: int error_reporting(int [level]);传回值: 整数函式种类: PHP 系统功能内容说明 本函式用来设定错误讯息回报的等级，参数 level 是一个整数的位元遮罩 (bitmask)，见下表。value constant 1 E_ERROR 2 E_W…
mysql多个实例
2019独角兽企业重金招聘Python工程师标准>>> 1>、关闭原有的默认端口3306的mysql:service mysqd stop 2>、拷贝或创建数据文件 cp -r /data/mysql/data1 /data/mysql/data_3307 格式 用bin/mysql_install_db --basedirmysql的目录 --datadir数据存放的目录 …
10行 python 代码做出哪些酷炫的事情？
来源 | Python小二Python凭借其简洁的代码，赢得了许多开发者的喜爱。因此也就促使了更多开发者用Python开发新的模块，从而形成良性循环，Python可以凭借更加简短的代码实现许多有趣的操作。下面我们来看看，我们用不超过10行代码能实…
这是一个不一样的社会公益活动
公益不是每个人的刚需，但是可以，以全链条模式联动更多人需求。 社会公益就是给社会带来帮助的事或物，它包含社区服务，环境保护，知识传播，公共福利，帮助他人，社会援助，社会…
剖析PHP中的输出缓冲
剖析PHP中的输出缓冲 本文按署名非商业用途保持一致授权作者: ，发表于2005年12月24日01时54分 我们先来看一段代码。<?php for ($i10; $i>0; $i--) {echo $i;flush();sleep(1); } ?>按照php手册里的说法该函数将当前为止程序的所有输出发送到用户的浏览…
luasocket 安装记录 （FS1.6）
说明： 想通过Lua 脚本实现 http。默认 FS 的 mod_lua 中没有对socket 的支持，如下的操作为lua 添加 socket的支持。 一、下载 luasocket 包： # wget http://luaforge.net/frs/download.php/2664/luasocket-2.0.2.tar.gz # tar zxvf luaso…
5个实用的例子，一行 Python 能干嘛？
作者 | 菜鸟哥来源 | 菜鸟学Python一行Python到底能干嘛，今天给大家分享几个不错的小例子，都是在实际工作中经常会碰到的例子，让你知道一行代码的威力，让菜鸟也能秒变王者，尤其是能镇住新来的学妹。01、如果你是HR你手…
ASP.NET Web Forms - 网站导航(Sitemap 文件)
【参考】ASP.NET Web Forms - 导航 ASP.NET 带有内建的导航控件。 网站导航 维护大型网站的菜单是困难而且费时的。 在 ASP.NET 中，菜单可存储在文件中，这样易于维护。文件通常名为 web.sitemap，并且被存放在网站的根目录下。 此外࿰…
14 款命令行常用工具的替代品！
作者 | JackTian来源 | 杰哥的IT之旅在 Linux 操作系统下，ls (list) 可以说是我们日常使用率较高的命令了，它主要用来显示目标列表，输出信息可以进行彩色加亮显示，以分区不同类型的文件。关于 ls[1] 的语法、选项、实例、扩展知识…
C#编码实践：使用委托和特性调用指定函数
2019独角兽企业重金招聘Python工程师标准>>> 建立一个C#控制台应用程序AttributeTest。 建立一个类Operations，代码如下： namespace AttributeTest {public class Operations{public static int Add(int a, int b) { return a b; }public st…
HTTP响应头不缓存
Cache-Control:nocache Pragma:no-cache Expires：-1 <meta http-equivCache-Control content-1/>
CSS面试复习（三）：预处理器、工程化方案、三大框架中的CSS
一、预处理器 1、介绍 基于CSS的另一种语言、通过工具编译成CSS、添加了很多CSS不具备的特性、能提升CSS文件的组织 2、less嵌套 3 、sass嵌套 4、 less变量 5、sass变量 6、less mixin 7、sass mixin 8、less extend 9、sass extend 10、less loop 11、sass loop 12、less imp…
用了这么久的 Python，居然没注意到这个操作
作者 | luanhz来源 | 小数志导读Python语言近年来的火热程度自不必说，这一方面得益于其庞大的第三方库的加持，使得其堪称万金油般的存在；另一方面也在于其简洁的语法和易用的函数。是的，Python语法之简洁和函数之丰富，…
apache的keepalive和keepalivetimeout（apache优化）
在APACHE的httpd.conf中，KeepAlive指的是保持连接活跃，类似于Mysql的永久连接。换一句话说，如果将KeepAlive设置为On，那么来自同一客户端的请求就不需要再一次连接，避免每次请求都要新建一个连接而加重服务器的负担。 …
讨论JDK的File.equal()
我们一般比较两个文件中的对象是相同的文件，通常使用java.io.File.equal()。这里，equal()是不是文件内容的比较结果为。象是否指向同一个文件。File的equal()方法。实际上调用了当前文件系统FileSystem的compareTo()。public boolean equals(Object obj)…