服务器之家

服务器之家 > 正文

纯Python轻松开发实时可视化仪表盘

时间:2021-04-25 23:04     来源/作者:Python大数据分析

简介

这是我的系列教程「Python+Dash快速web应用开发」的第十五期,在前面的一系列教程中,我们针对Dash中的各种常用基础概念作了比较详细的介绍,如果前面的教程你有认真学习,那么相信到今天你已经有能力开发初具规模的Dash应用了。

而在Dash生态中还有一系列功能比较特殊但又非常实用的部件,今天的文章我们就来学习这些常用的「特殊部件」。

纯Python轻松开发实时可视化仪表盘

图1

2 Dash中的常用特殊功能部件

 

2.1 用Store()来存储数据

在dash_core_components中有着很多功能特殊的部件,Store()就是其中之一,它的功能十分的简单,就是用来存储数据的,譬如存储一些数值、字符串等基础数据类型或者把Python中的列表、字典等作为json格式数据存进去。

Store()的主要参数/属性除了id之外,还有:

data,代表其所存放的数据,也是我们编写回调函数时关注的属性;

modified_timestamp,用于记录最后一次data属性被修改的时间戳,通常用不到;

storage_type,用于设置存储数据的生命周期,有3种,storage_type='memory'时生命周期最短,只要页面一刷新,data就会恢复初始状态;storage_type='session'时,只有浏览器被关闭时data才会被重置;而最后一种storage_type='local'时,会将数据存储在本地缓存中,只有手动清除,data才会被重置。

话不多说,直接来看一个直观的例子:

app1.py

  1. import dash 
  2. import dash_core_components as dcc 
  3. import dash_bootstrap_components as dbc 
  4. from dash.dependencies import Input, Output 
  5.  
  6. app = dash.Dash(__name__) 
  7.  
  8. app.layout = dbc.Container( 
  9.     [ 
  10.         dbc.Form( 
  11.             [ 
  12.                 dbc.FormGroup( 
  13.                     [ 
  14.                         dbc.Label('storage = "memory"时'), 
  15.                         dbc.Input(id='input-memory1', autoComplete='off'), 
  16.                         dbc.Input(id='input-memory2', style={'margin-top''3px'}), 
  17.                         dcc.Store(id='data-in-memory'
  18.                     ] 
  19.                 ), 
  20.                 dbc.FormGroup( 
  21.                     [ 
  22.                         dbc.Label('storage = "session"时'), 
  23.                         dbc.Input(id='input-session1', autoComplete='off'), 
  24.                         dbc.Input(id='input-session2', style={'margin-top''3px'}), 
  25.                         dcc.Store(id='data-in-session', storage_type='session'
  26.                     ] 
  27.                 ), 
  28.                 dbc.FormGroup( 
  29.                     [ 
  30.                         dbc.Label('storage = "local"时'), 
  31.                         dbc.Input(id='input-local1', autoComplete='off'), 
  32.                         dbc.Input(id='input-local2', style={'margin-top''3px'}), 
  33.                         dcc.Store(id='data-in-local', storage_type='local'
  34.                     ] 
  35.                 ), 
  36.             ] 
  37.         ) 
  38.     ], 
  39.     style={ 
  40.         'margin-top''100px'
  41.         'max-width''600px' 
  42.     } 
  43.  
  44.  
  45. # memory对应回调 
  46. @app.callback( 
  47.     Output('data-in-memory''data'), 
  48.     Input('input-memory1''value'
  49. def data_in_memory_save_data(value): 
  50.     if value: 
  51.         return value 
  52.  
  53.     return dash.no_update 
  54.  
  55.  
  56. @app.callback( 
  57.     Output('input-memory2''placeholder'), 
  58.     Input('data-in-memory''data'
  59. def data_in_memory_placeholder(data): 
  60.     if data: 
  61.         return data 
  62.  
  63.     return dash.no_update 
  64.  
  65.  
  66. # session对应回调 
  67. @app.callback( 
  68.     Output('data-in-session''data'), 
  69.     Input('input-session1''value'
  70. def data_in_session_save_data(value): 
  71.     if value: 
  72.         return value 
  73.  
  74.     return dash.no_update 
  75.  
  76.  
  77. @app.callback( 
  78.     Output('input-session2''placeholder'), 
  79.     Input('data-in-session''data'
  80. def data_in_session_placeholder(data): 
  81.     if data: 
  82.         return data 
  83.  
  84.     return dash.no_update 
  85.  
  86.  
  87. local对应回调 
  88. @app.callback( 
  89.     Output('data-in-local''data'), 
  90.     Input('input-local1''value'
  91. def data_in_local_save_data(value): 
  92.     if value: 
  93.         return value 
  94.  
  95.     return dash.no_update 
  96.  
  97.  
  98. @app.callback( 
  99.     Output('input-local2''placeholder'), 
  100.     Input('data-in-local''data'
  101. def data_in_local_placeholder(data): 
  102.     if data: 
  103.         return data 
  104.  
  105.     return dash.no_update 
  106.  
  107.  
  108. if __name__ == '__main__'
  109.     app.run_server(debug=True

可以看到,不同storage参数对应的数据,生命周期有着很大的区别:

纯Python轻松开发实时可视化仪表盘

图2

就是凭借着这种自由存储数据的特性,Store()可以帮助我们完成很多非常实用的功能,我们会在本文最后的例子里进行展示。

2.2 用Interval()实现周期性回调

同样是dash_core_components中的组件,Interval()的功能也很有意思,它可以帮助我们实现周期性自动回调,譬如开发一个实时股价系统,每隔一段时间就从后台获取最新的数据,无需我们手动刷新页面,其主要的参数/属性有:

n_intervals,Interval()的核心属性,所谓的自动更新实际上就是自动对n_intervals的递增过程;

interval,数值型,用于设置每隔多少毫秒对n_intervals的值进行一次递增,默认为1000即1秒;

max_intervals,int型,用于设置在经历多少次递增后,不再继续自动更新,默认为-1即不限制;

disabled,bool型,默认为False,用于设置是否停止递增更新过程,如果说max_intervals控制的过程是for循环的话,disabled就是while循环,我们可以利用它自行编写逻辑在特定的条件下停止Interval()的递增过程。

下面我们从一个伪造数据的股价实时更新系统例子中进一步理解Interval()的作用:

app2.py

  1. import dash 
  2. import numpy as np 
  3. import dash_core_components as dcc 
  4. import dash_html_components as html 
  5. import dash_bootstrap_components as dbc 
  6. from dash.dependencies import Input, Output, State 
  7.  
  8. app = dash.Dash(__name__) 
  9.  
  10. app.layout = dbc.Container( 
  11.     [ 
  12.         html.P( 
  13.             [ 
  14.                 html.Strong('贵州茅台(600519)'), 
  15.                 '最新股价:'
  16.                 html.Span('2108.94', id='latest-price'
  17.             ] 
  18.         ), 
  19.         dcc.Interval(id='demo-interval', interval=1000) 
  20.     ], 
  21.     style={ 
  22.         'margin-top''100px' 
  23.     } 
  24.  
  25.  
  26. @app.callback( 
  27.     [Output('latest-price''children'), 
  28.      Output('latest-price''style')], 
  29.     Input('demo-interval''n_intervals'), 
  30.     State('latest-price''children'
  31. def fake_price_generator(n_intervals, latest_price): 
  32.     fake_price = float(latest_price) + np.random.normal(0, 0.1) 
  33.  
  34.     if fake_price > float(latest_price): 
  35.         return f'{fake_price:.2f}', {'color''red''background-color''rgba(195, 8, 26, 0.2)'
  36.  
  37.     elif fake_price < float(latest_price): 
  38.         return f'{fake_price:.2f}', {'color''green''background-color''rgba(50, 115, 80, 0.2)'
  39.  
  40.     return f'{fake_price:.2f}', {'background-color''rgba(113, 120, 117, 0.2)'
  41.  
  42.  
  43. if __name__ == '__main__'
  44.     app.run_server(debug=True

哈哈,是不是非常的实用~

纯Python轻松开发实时可视化仪表盘

图3

2.3 利用ColorPicker()进行交互式色彩设置

接下来我们要介绍的这个很有意思的部件来自Dash的官方依赖dash_daq,它并不是自带的,我们需要用pip进行安装。

ColorPicker()的功能是渲染出一个交互式的色彩选择部件,使得我们可以更方便更直观地选择色彩值,其主要参数/属性有:

label,字符串或字典,若只传入字符串,则传入的文字会作为渲染出的色彩选择器的标题,若传入字典,其label键值对用于设置标题文本内容,style参数用于自定义css样式;

labelPosition,字符型,top时标题会置于顶部,bottom时会置于底部;

size,设置部件整体的像素宽度

value,字典型,作为参数时可以用来设定色彩选择器的初始色彩,作为属性时可以获取当前色彩选择器的选定色彩,hex键值对可以直接获取十六进制色彩值,rgb键对应的值为包含r、g、b和a四个键值对的字典,即构成rgba色彩值的三通道+透明度值。

让我们通过下面这个简单的例子来认识它的工作过程:

app3.py

  1. import dash 
  2. import dash_daq as daq 
  3. import dash_html_components as html 
  4. import dash_bootstrap_components as dbc 
  5. from dash.dependencies import Input, Output 
  6.  
  7. app = dash.Dash(__name__) 
  8.  
  9. app.layout = dbc.Container( 
  10.     [ 
  11.         daq.ColorPicker( 
  12.             id='color-picker'
  13.             label={ 
  14.                 'label''色彩选择器'
  15.                 'style': { 
  16.                     'font-size''18px'
  17.                     'font-family''SimHei'
  18.                     'font-weight''bold' 
  19.                 } 
  20.             }, 
  21.             size=400, 
  22.             value=dict(hex="#120E03"
  23.         ), 
  24.         html.P( 
  25.             '测试'*100, 
  26.             id='demo-p'
  27.             style={ 
  28.                 'margin-top''20px' 
  29.             } 
  30.         ) 
  31.     ], 
  32.     style={ 
  33.         'margin-top''30px'
  34.         'max-width''500px' 
  35.     } 
  36.  
  37. app.clientside_callback( 
  38.     ""
  39.     function(color) { 
  40.         return {'color': color.hex, 'margin-top''20px'}; 
  41.     } 
  42.     """, 
  43.     Output('demo-p''style'), 
  44.     Input('color-picker''value'
  45.  
  46. if __name__ == '__main__'
  47.     app.run_server(debug=True

动图录制出来因为被压缩了所以色彩区域看起来跟打了码似得:

纯Python轻松开发实时可视化仪表盘

图4

实际上是这样的:

纯Python轻松开发实时可视化仪表盘

图5

2.4 利用DashDatetimepicker()进行时间范围选择

接下来我要给大家介绍的这个部件DashDatetimepicker()也是来自第三方库,它基于react-datetime,可以帮助我们创建进行日期选择功能的部件(其实dash-core_components中也有类似功能的DatePickerRange()部件,但是太丑了,而且对中文支持的不好)。

使用pip install dash_datetimepicker完成安装之后,默认的部件月份和星期的名称显示都是英文的,我通过对相关的js源码略加修改之后,便可以使用中文了,大家使用的时候把本期附件中的dash_datetimepicker.min.js放到assets目录下即可。

DashDatetimepicker()使用起来非常简单,除了id之外,我们只需要在回调中获取它的startDate与endDate属性即可捕获到用户设置的日期时间范围(在回调中我们接收到的开始结束时间需要加上8个小时,这是个bug):

app4.py

  1. import dash 
  2. import pandas as pd 
  3. import dash_datetimepicker 
  4. import dash_html_components as html 
  5. import dash_bootstrap_components as dbc 
  6. from dash.dependencies import Input, Output 
  7.  
  8. app = dash.Dash(__name__) 
  9.  
  10. app.layout = dbc.Container( 
  11.     [ 
  12.         dash_datetimepicker.DashDatetimepicker(id="datetime-picker"), 
  13.         html.H6(id='datetime-output', style={'margin-top''20px'}) 
  14.     ], 
  15.     style={ 
  16.         'margin-top''100px'
  17.         'max-width''600px' 
  18.     } 
  19.  
  20.  
  21. @app.callback( 
  22.     Output('datetime-output''children'), 
  23.     [Input('datetime-picker''startDate'), 
  24.      Input('datetime-picker''endDate')] 
  25. def datetime_range(startDate, endDate): 
  26.     # 修正8小时时间差bug并格式化为字符串 
  27.     startDate = (pd.to_datetime(startDate) + pd.Timedelta(hours=8)).strftime('%Y-%m-%d %H:%M'
  28.     endDate = (pd.to_datetime(endDate) + pd.Timedelta(hours=8)).strftime('%Y-%m-%d %H:%M'
  29.  
  30.     return f'从 {startDate} 到 {endDate}' 
  31.  
  32.  
  33. if __name__ == "__main__"
  34.     app.run_server(debug=True
纯Python轻松开发实时可视化仪表盘

图6

3 动手打造一个实时可视化大屏

 

在学习完今天的内容之后,我们就可以做一些功能上很amazing的事情——搭建一个实时更新的可视化仪表盘

思路其实很简单,主要用到今天学习到的Interval()与Store(),原理是先从官网静态的案例中移植js代码到Dash的浏览器端回调中,构建出输入为Store()的data的回调函数;

再利用Interval()的n_intervals触发Store()的data更新,从而实现这套从数据更新到图表更新的链式反应。效果如下:

纯Python轻松开发实时可视化仪表盘

图7

而代码涉及到多个文件,这里就不直接放出,你可以在文章开头的地址中找到对应本期的附件进行学习。

原文地址:https://mp.weixin.qq.com/s?__biz=MzA3ODYwNDkzOQ==&mid=2659064843&idx=1&sn=037149b8462bb11c5e9550fc2185f357&chksm=84ca83efb3bd0af9fdf66ac8158fb8aded8f2c0b8a36063fa7b8dce4da0d9bfba4061e5e9806&mpshare=1&

相关文章

热门资讯

2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全
2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全 2019-12-26
yue是什么意思 网络流行语yue了是什么梗
yue是什么意思 网络流行语yue了是什么梗 2020-10-11
背刺什么意思 网络词语背刺是什么梗
背刺什么意思 网络词语背刺是什么梗 2020-05-22
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总 2020-11-13
Intellij idea2020永久破解,亲测可用!!!
Intellij idea2020永久破解,亲测可用!!! 2020-07-29
返回顶部