本文示例代码已上传至我的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 dash
import dash_core_components as dcc
import dash_bootstrap_components as dbc
from dash.dependencies import input , output
app = 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_update
if __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 dash
import numpy as np
import dash_core_components as dcc
import dash_html_components as html
import dash_bootstrap_components as dbc
from dash.dependencies import input , output, state
app = 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 dash
import dash_daq as daq
import dash_html_components as html
import dash_bootstrap_components as dbc
from dash.dependencies import input , output
app = 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 dash
import pandas as pd
import dash_datetimepicker
import dash_html_components as html
import dash_bootstrap_components as dbc
from dash.dependencies import input , output
app = 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