本文示例代码已上传至我的github仓库https://github.com/cnfeffery/datasciencestudynotes
1 简介
这是我的系列教程「python+dash快速web应用开发」的第十五期，在前面的一系列教程中，我们针对dash中的各种常用基础概念作了比较详细的介绍，如果前面的教程你有认真学习，那么相信到今天你已经有能力开发初具规模的dash应用了。
而在dash生态中还有一系列功能比较特殊但又非常实用的部件，今天的文章我们就来学习这些常用的「特殊部件」。
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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
|
import dashimport dash_core_components as dccimport dash_bootstrap_components as dbcfrom dash.dependencies import input, outputapp = dash.dash(__name__)app.layout = dbc.container( [ dbc.form( [ dbc.formgroup( [ dbc.label('storage = "memory"时'), dbc.input(id='input-memory1', autocomplete='off'), dbc.input(id='input-memory2', style={'margin-top': '3px'}), dcc.store(id='data-in-memory') ] ), dbc.formgroup( [ dbc.label('storage = "session"时'), dbc.input(id='input-session1', autocomplete='off'), dbc.input(id='input-session2', style={'margin-top': '3px'}), dcc.store(id='data-in-session', storage_type='session') ] ), dbc.formgroup( [ dbc.label('storage = "local"时'), dbc.input(id='input-local1', autocomplete='off'), dbc.input(id='input-local2', style={'margin-top': '3px'}), dcc.store(id='data-in-local', storage_type='local') ] ), ] ) ], style={ 'margin-top': '100px', 'max-width': '600px' })# memory对应回调@app.callback( output('data-in-memory', 'data'), input('input-memory1', 'value'))def data_in_memory_save_data(value): if value: return value return dash.no_update@app.callback( output('input-memory2', 'placeholder'), input('data-in-memory', 'data'))def data_in_memory_placeholder(data): if data: return data return dash.no_update# session对应回调@app.callback( output('data-in-session', 'data'), input('input-session1', 'value'))def data_in_session_save_data(value): if value: return value return dash.no_update@app.callback( output('input-session2', 'placeholder'), input('data-in-session', 'data'))def data_in_session_placeholder(data): if data: return data return dash.no_update# local对应回调@app.callback( output('data-in-local', 'data'), input('input-local1', 'value'))def data_in_local_save_data(value): if value: return value return dash.no_update@app.callback( output('input-local2', 'placeholder'), input('data-in-local', 'data'))def data_in_local_placeholder(data): if data: return data return dash.no_updateif __name__ == '__main__': app.run_server(debug=true) |
可以看到，不同storage参数对应的数据，生命周期有着很大的区别：
就是凭借着这种自由存储数据的特性，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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
|
import dashimport numpy as npimport dash_core_components as dccimport dash_html_components as htmlimport dash_bootstrap_components as dbcfrom dash.dependencies import input, output, stateapp = dash.dash(__name__)app.layout = dbc.container( [ html.p( [ html.strong('贵州茅台(600519)'), '最新股价：', html.span('2108.94', id='latest-price') ] ), dcc.interval(id='demo-interval', interval=1000) ], style={ 'margin-top': '100px' })@app.callback( [output('latest-price', 'children'), output('latest-price', 'style')], input('demo-interval', 'n_intervals'), state('latest-price', 'children'))def fake_price_generator(n_intervals, latest_price): fake_price = float(latest_price) + np.random.normal(0, 0.1) if fake_price > float(latest_price): return f'{fake_price:.2f}', {'color': 'red', 'background-color': 'rgba(195, 8, 26, 0.2)'} elif fake_price < float(latest_price): return f'{fake_price:.2f}', {'color': 'green', 'background-color': 'rgba(50, 115, 80, 0.2)'} return f'{fake_price:.2f}', {'background-color': 'rgba(113, 120, 117, 0.2)'}if __name__ == '__main__': app.run_server(debug=true) |
哈哈，是不是非常的实用~
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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
|
import dashimport dash_daq as daqimport dash_html_components as htmlimport dash_bootstrap_components as dbcfrom dash.dependencies import input, outputapp = dash.dash(__name__)app.layout = dbc.container( [ daq.colorpicker( id='color-picker', label={ 'label': '色彩选择器', 'style': { 'font-size': '18px', 'font-family': 'simhei', 'font-weight': 'bold' } }, size=400, value=dict(hex="#120e03") ), html.p( '测试'*100, id='demo-p', style={ 'margin-top': '20px' } ) ], style={ 'margin-top': '30px', 'max-width': '500px' })app.clientside_callback( """ function(color) { return {'color': color.hex, 'margin-top': '20px'}; } """, output('demo-p', 'style'), input('color-picker', 'value'))if __name__ == '__main__': app.run_server(debug=true) |
动图录制出来因为被压缩了所以色彩区域看起来跟打了码似得：
实际上是这样的：
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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
|
import dashimport pandas as pdimport dash_datetimepickerimport dash_html_components as htmlimport dash_bootstrap_components as dbcfrom dash.dependencies import input, outputapp = dash.dash(__name__)app.layout = dbc.container( [ dash_datetimepicker.dashdatetimepicker(id="datetime-picker"), html.h6(id='datetime-output', style={'margin-top': '20px'}) ], style={ 'margin-top': '100px', 'max-width': '600px' })@app.callback( output('datetime-output', 'children'), [input('datetime-picker', 'startdate'), input('datetime-picker', 'enddate')])def datetime_range(startdate, enddate): # 修正8小时时间差bug并格式化为字符串 startdate = (pd.to_datetime(startdate) + pd.timedelta(hours=8)).strftime('%y-%m-%d %h:%m') enddate = (pd.to_datetime(enddate) + pd.timedelta(hours=8)).strftime('%y-%m-%d %h:%m') return f'从 {startdate} 到 {enddate}'if __name__ == "__main__": app.run_server(debug=true) |
3 动手打造一个实时可视化大屏
在学习完今天的内容之后，我们就可以做一些功能上很amazing的事情——搭建一个实时更新的可视化仪表盘。
思路其实很简单，主要用到今天学习到的interval()与store()，原理是先从官网静态的案例中移植js代码到dash的浏览器端回调中，构建出输入为store()的data的回调函数；
再利用interval()的n_intervals触发store()的data更新，从而实现这套从数据更新到图表更新的链式反应。效果如下：
而代码涉及到多个文件，这里就不直接放出，你可以在文章开头的地址中找到对应本期的附件进行学习。
以上就是python开发实时可视化仪表盘的示例的详细内容，更多关于python开发实时可视化仪表盘的资料请关注服务器之家其它相关文章！
原文链接：https://mp.weixin.qq.com/s/JaOf4Idwi3NuZNOwECoV4Q
