您好,登錄后才能下訂單哦!
本文小編為大家詳細(xì)介紹“怎么用純Python開(kāi)發(fā)實(shí)時(shí)可視化儀表盤(pán)”,內(nèi)容詳細(xì),步驟清晰,細(xì)節(jié)處理妥當(dāng),希望這篇“怎么用純Python開(kāi)發(fā)實(shí)時(shí)可視化儀表盤(pán)”文章能幫助大家解決疑惑,下面跟著小編的思路慢慢深入,一起來(lái)學(xué)習(xí)新知識(shí)吧。
在dash_core_components中有著很多功能特殊的部件,Store()就是其中之一,它的功能十分的簡(jiǎn)單,就是用來(lái)存儲(chǔ)數(shù)據(jù)的,譬如存儲(chǔ)一些數(shù)值、字符串等基礎(chǔ)數(shù)據(jù)類(lèi)型或者把Python中的列表、字典等作為json格式數(shù)據(jù)存進(jìn)去。
Store()的主要參數(shù)/屬性除了id之外,還有:
data,代表其所存放的數(shù)據(jù),也是我們編寫(xiě)回調(diào)函數(shù)時(shí)關(guān)注的屬性;
modified_timestamp,用于記錄最后一次data屬性被修改的時(shí)間戳,通常用不到;
storage_type,用于設(shè)置存儲(chǔ)數(shù)據(jù)的生命周期,有3種,storage_type='memory'時(shí)生命周期最短,只要頁(yè)面一刷新,data就會(huì)恢復(fù)初始狀態(tài);storage_type='session'時(shí),只有瀏覽器被關(guān)閉時(shí)data才會(huì)被重置;而最后一種storage_type='local'時(shí),會(huì)將數(shù)據(jù)存儲(chǔ)在本地緩存中,只有手動(dòng)清除,data才會(huì)被重置。
話不多說(shuō),直接來(lái)看一個(gè)直觀的例子:
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"時(shí)'), 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"時(shí)'), 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"時(shí)'), 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對(duì)應(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對(duì)應(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對(duì)應(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ù)對(duì)應(yīng)的數(shù)據(jù),生命周期有著很大的區(qū)別:
就是憑借著這種自由存儲(chǔ)數(shù)據(jù)的特性,Store()可以幫助我們完成很多非常實(shí)用的功能,我們會(huì)在本文最后的例子里進(jìn)行展示。
同樣是dash_core_components中的組件,Interval()的功能也很有意思,它可以幫助我們實(shí)現(xiàn)周期性自動(dòng)回調(diào),譬如開(kāi)發(fā)一個(gè)實(shí)時(shí)股價(jià)系統(tǒng),每隔一段時(shí)間就從后臺(tái)獲取最新的數(shù)據(jù),無(wú)需我們手動(dòng)刷新頁(yè)面,其主要的參數(shù)/屬性有:
n_intervals,Interval()的核心屬性,所謂的自動(dòng)更新實(shí)際上就是自動(dòng)對(duì)n_intervals的遞增過(guò)程;
interval,數(shù)值型,用于設(shè)置每隔多少毫秒對(duì)n_intervals的值進(jìn)行一次遞增,默認(rèn)為1000即1秒;
max_intervals,int型,用于設(shè)置在經(jīng)歷多少次遞增后,不再繼續(xù)自動(dòng)更新,默認(rèn)為-1即不限制;
disabled,bool型,默認(rèn)為False,用于設(shè)置是否停止遞增更新過(guò)程,如果說(shuō)max_intervals控制的過(guò)程是for循環(huán)的話,disabled就是while循環(huán),我們可以利用它自行編寫(xiě)邏輯在特定的條件下停止Interval()的遞增過(guò)程。
下面我們從一個(gè)偽造數(shù)據(jù)的股價(jià)實(shí)時(shí)更新系統(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('貴州茅臺(tái)(600519)'), '最新股價(jià):', 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)
哈哈,是不是非常的實(shí)用~
接下來(lái)我們要介紹的這個(gè)很有意思的部件來(lái)自Dash的官方依賴(lài)dash_daq,它并不是自帶的,我們需要用pip進(jìn)行安裝。
ColorPicker()的功能是渲染出一個(gè)交互式的色彩選擇部件,使得我們可以更方便更直觀地選擇色彩值,其主要參數(shù)/屬性有:
label,字符串或字典,若只傳入字符串,則傳入的文字會(huì)作為渲染出的色彩選擇器的標(biāo)題,若傳入字典,其label鍵值對(duì)用于設(shè)置標(biāo)題文本內(nèi)容,style參數(shù)用于自定義css樣式;
labelPosition,字符型,top時(shí)標(biāo)題會(huì)置于頂部,bottom時(shí)會(huì)置于底部;
size,設(shè)置部件整體的像素寬度
value,字典型,作為參數(shù)時(shí)可以用來(lái)設(shè)定色彩選擇器的初始色彩,作為屬性時(shí)可以獲取當(dāng)前色彩選擇器的選定色彩,hex鍵值對(duì)可以直接獲取十六進(jìn)制色彩值,rgb鍵對(duì)應(yīng)的值為包含r、g、b和a四個(gè)鍵值對(duì)的字典,即構(gòu)成rgba色彩值的三通道+透明度值。
讓我們通過(guò)下面這個(gè)簡(jiǎn)單的例子來(lái)認(rèn)識(shí)它的工作過(guò)程:
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( '測(cè)試'*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)
動(dòng)圖錄制出來(lái)因?yàn)楸粔嚎s了所以色彩區(qū)域看起來(lái)跟打了碼似得:
實(shí)際上是這樣的:
接下來(lái)我要給大家介紹的這個(gè)部件DashDatetimepicker()也是來(lái)自第三方庫(kù),它基于react-datetime,可以幫助我們創(chuàng)建進(jìn)行日期選擇功能的部件(其實(shí)dash-core_components中也有類(lèi)似功能的DatePickerRange()部件,但是太丑了,而且對(duì)中文支持的不好)。
使用pip install dash_datetimepicker完成安裝之后,默認(rèn)的部件月份和星期的名稱(chēng)顯示都是英文的,我通過(guò)對(duì)相關(guān)的js源碼略加修改之后,便可以使用中文了,大家使用的時(shí)候把本期附件中的dash_datetimepicker.min.js放到assets目錄下即可。
DashDatetimepicker()使用起來(lái)非常簡(jiǎn)單,除了id之外,我們只需要在回調(diào)中獲取它的startDate與endDate屬性即可捕獲到用戶設(shè)置的日期時(shí)間范圍(在回調(diào)中我們接收到的開(kāi)始結(jié)束時(shí)間需要加上8個(gè)小時(shí),這是個(gè)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小時(shí)時(shí)間差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)
在學(xué)習(xí)完今天的內(nèi)容之后,我們就可以做一些功能上很amazing的事情——搭建一個(gè)實(shí)時(shí)更新的可視化儀表盤(pán)。
思路其實(shí)很簡(jiǎn)單,主要用到今天學(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更新,從而實(shí)現(xiàn)這套從數(shù)據(jù)更新到圖表更新的鏈?zhǔn)椒磻?yīng)。效果如下:
讀到這里,這篇“怎么用純Python開(kāi)發(fā)實(shí)時(shí)可視化儀表盤(pán)”文章已經(jīng)介紹完畢,想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過(guò)才能領(lǐng)會(huì),如果想了解更多相關(guān)內(nèi)容的文章,歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。