1 簡介

這是我的系列教程「Python+Dash快速web應(yīng)用開發(fā)」的第十五期，在前面的一系列教程中，我們針對Dash中的各種常用基礎(chǔ)概念作了比較詳細(xì)的介紹，如果前面的教程你有認(rèn)真學(xué)習(xí)，那么相信到今天你已經(jīng)有能力開發(fā)初具規(guī)模的Dash應(yīng)用了。

而在Dash生態(tài)中還有一系列功能比較特殊但又非常實用的部件，今天的文章我們就來學(xué)習(xí)這些常用的「特殊部件」。

 

 

 

[[395483]]

 

圖1

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

2.1 用Store()來存儲數(shù)據(jù)

在dash_core_components中有著很多功能特殊的部件，Store()就是其中之一，它的功能十分的簡單，就是用來存儲數(shù)據(jù)的，譬如存儲一些數(shù)值、字符串等基礎(chǔ)數(shù)據(jù)類型或者把Python中的列表、字典等作為json格式數(shù)據(jù)存進(jìn)去。

Store()的主要參數(shù)/屬性除了id之外，還有：

data，代表其所存放的數(shù)據(jù)，也是我們編寫回調(diào)函數(shù)時關(guān)注的屬性;

modified_timestamp，用于記錄最后一次data屬性被修改的時間戳，通常用不到;

storage_type，用于設(shè)置存儲數(shù)據(jù)的生命周期，有3種，storage_type='memory'時生命周期最短，只要頁面一刷新，data就會恢復(fù)初始狀態(tài);storage_type='session'時，只有瀏覽器被關(guān)閉時data才會被重置;而最后一種storage_type='local'時，會將數(shù)據(jù)存儲在本地緩存中，只有手動清除，data才會被重置。

話不多說，直接來看一個直觀的例子：

app1.py

 

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對應(yīng)回調(diào) 
@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對應(yīng)回調(diào) 
@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對應(yīng)回調(diào) 
@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參數(shù)對應(yīng)的數(shù)據(jù)，生命周期有著很大的區(qū)別：

 

 

圖2

就是憑借著這種自由存儲數(shù)據(jù)的特性，Store()可以幫助我們完成很多非常實用的功能，我們會在本文最后的例子里進(jìn)行展示。

2.2 用Interval()實現(xiàn)周期性回調(diào)

同樣是dash_core_components中的組件，Interval()的功能也很有意思，它可以幫助我們實現(xiàn)周期性自動回調(diào)，譬如開發(fā)一個實時股價系統(tǒng)，每隔一段時間就從后臺獲取最新的數(shù)據(jù)，無需我們手動刷新頁面，其主要的參數(shù)/屬性有：

n_intervals，Interval()的核心屬性，所謂的自動更新實際上就是自動對n_intervals的遞增過程;

interval，數(shù)值型，用于設(shè)置每隔多少毫秒對n_intervals的值進(jìn)行一次遞增，默認(rèn)為1000即1秒;

max_intervals，int型，用于設(shè)置在經(jīng)歷多少次遞增后，不再繼續(xù)自動更新，默認(rèn)為-1即不限制;

disabled，bool型，默認(rèn)為False，用于設(shè)置是否停止遞增更新過程，如果說max_intervals控制的過程是for循環(huán)的話，disabled就是while循環(huán)，我們可以利用它自行編寫邏輯在特定的條件下停止Interval()的遞增過程。

下面我們從一個偽造數(shù)據(jù)的股價實時更新系統(tǒng)例子中進(jìn)一步理解Interval()的作用：

app2.py

 

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) 

哈哈，是不是非常的實用~

 

 

圖3

2.3 利用ColorPicker()進(jìn)行交互式色彩設(shè)置

接下來我們要介紹的這個很有意思的部件來自Dash的官方依賴dash_daq，它并不是自帶的，我們需要用pip進(jìn)行安裝。

ColorPicker()的功能是渲染出一個交互式的色彩選擇部件，使得我們可以更方便更直觀地選擇色彩值，其主要參數(shù)/屬性有：

label，字符串或字典，若只傳入字符串，則傳入的文字會作為渲染出的色彩選擇器的標(biāo)題，若傳入字典，其label鍵值對用于設(shè)置標(biāo)題文本內(nèi)容，style參數(shù)用于自定義css樣式;

labelPosition，字符型，top時標(biāo)題會置于頂部，bottom時會置于底部;

size，設(shè)置部件整體的像素寬度

value，字典型，作為參數(shù)時可以用來設(shè)定色彩選擇器的初始色彩，作為屬性時可以獲取當(dāng)前色彩選擇器的選定色彩，hex鍵值對可以直接獲取十六進(jìn)制色彩值，rgb鍵對應(yīng)的值為包含r、g、b和a四個鍵值對的字典，即構(gòu)成rgba色彩值的三通道+透明度值。

讓我們通過下面這個簡單的例子來認(rèn)識它的工作過程：

app3.py

 

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) 

動圖錄制出來因為被壓縮了所以色彩區(qū)域看起來跟打了碼似得：

 

 

圖4

實際上是這樣的：

 

 

 

 

圖5

2.4 利用DashDatetimepicker()進(jìn)行時間范圍選擇

接下來我要給大家介紹的這個部件DashDatetimepicker()也是來自第三方庫，它基于react-datetime，可以幫助我們創(chuàng)建進(jìn)行日期選擇功能的部件(其實dash-core_components中也有類似功能的DatePickerRange()部件，但是太丑了，而且對中文支持的不好)。

使用pip install dash_datetimepicker完成安裝之后，默認(rèn)的部件月份和星期的名稱顯示都是英文的，我通過對相關(guān)的js源碼略加修改之后，便可以使用中文了，大家使用的時候把本期附件中的dash_datetimepicker.min.js放到assets目錄下即可。

DashDatetimepicker()使用起來非常簡單，除了id之外，我們只需要在回調(diào)中獲取它的startDate與endDate屬性即可捕獲到用戶設(shè)置的日期時間范圍(在回調(diào)中我們接收到的開始結(jié)束時間需要加上8個小時，這是個bug)：

app4.py

 

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) 

 

 

 

圖6

3 動手打造一個實時可視化大屏

在學(xué)習(xí)完今天的內(nèi)容之后，我們就可以做一些功能上很amazing的事情——搭建一個實時更新的可視化儀表盤。

思路其實很簡單，主要用到今天學(xué)習(xí)到的Interval()與Store()，原理是先從官網(wǎng)靜態(tài)的案例中移植js代碼到Dash的瀏覽器端回調(diào)中，構(gòu)建出輸入為Store()的data的回調(diào)函數(shù);

再利用Interval()的n_intervals觸發(fā)Store()的data更新，從而實現(xiàn)這套從數(shù)據(jù)更新到圖表更新的鏈?zhǔn)椒磻?yīng)。效果如下：

圖7

而代碼涉及到多個文件，這里就不直接放出，你可以在文章開頭的地址中找到對應(yīng)本期的附件進(jìn)行學(xué)習(xí)。