plotly Dash可以將我們用plotly畫(huà)出的圖片或者基于地圖的展示通過(guò)交互式可視化的方式表達(dá)出來(lái),我們可以定制Select標(biāo)簽，Radio標(biāo)簽，Input標(biāo)簽，Table表格，Graph圖件，Map地圖控件等等的一些HTML元素通過(guò)傳入數(shù)據(jù)以及控件交互，使得所有要素嵌入到一個(gè)單頁(yè)面中，便于我們?nèi)ッ枋鲆环N現(xiàn)象，一篇論文，甚至是一種想法。我先貼出一個(gè)官方的demo，詳細(xì)的解釋一下dash的構(gòu)成，然后再給出一個(gè)稍微復(fù)雜的demo進(jìn)行進(jìn)一步的講解，show the code
import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
# 初始化一個(gè)輸入框和一個(gè)div標(biāo)簽內(nèi)容頁(yè)
app.layout = html.Div([
dcc.Input(id='my-id', value='initial value', type='text'),
html.Div(id='my-div')
])
@app.callback(
Output(component_id='my-div', component_property='children'),
[Input(component_id='my-id', component_property='value')]
)
def update_output_div(input_value):
return 'You\'ve entered "{}"'.format(input_value)
if __name__ == '__main__':
app.run_server(debug=True)
這是一個(gè)簡(jiǎn)單的demo，有一個(gè)輸入框，一個(gè)輸出的div，當(dāng)輸入框中的數(shù)據(jù)改變后，div中的值也跟著改變，現(xiàn)在看一下這個(gè)程序的結(jié)構(gòu)。
external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
上面這一部分是代表當(dāng)前頁(yè)面的CSS，plotly官方有很多自己的css庫(kù)，也可以自己定制自己的css代碼，官方的教程配置鏈接。
app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
上面這一部分是初始化當(dāng)前的dash頁(yè)面
app.layout = html.Div([
dcc.Input(id='my-id', value='initial value', type='text'),
html.Div(id='my-div')
])
上面這一部分是初始化當(dāng)前頁(yè)面的一些標(biāo)簽元素，如input標(biāo)簽，div標(biāo)簽等等吧，設(shè)置元素標(biāo)簽的id，類型等等吧，以及初始化元素的值。
@app.callback(
Output(component_id='my-div', component_property='children'),
[Input(component_id='my-id', component_property='value')]
)
def update_output_div(input_value):
return 'You\'ve entered "{}"'.format(input_value)
上面這一部分為注解執(zhí)行部分，包括輸入部分和輸出部分，以及執(zhí)行的回調(diào)函數(shù)，輸入部分為從哪獲取數(shù)據(jù)數(shù)據(jù)進(jìn)行交互，輸出部分為將獲得的數(shù)據(jù)進(jìn)行函數(shù)運(yùn)算后輸出的組件，回調(diào)函數(shù)是獲得輸入值后進(jìn)行運(yùn)算所執(zhí)行的函數(shù)。當(dāng)前回調(diào)函數(shù)執(zhí)行的就是格式化輸出我們的輸入到input標(biāo)簽中的value。
這樣我們看完Dash App的結(jié)構(gòu)就很清楚了，分為以下3個(gè)主要部分：
- 頁(yè)面的CSS元素信息
- 頁(yè)面的HTML要素的信息
-
頁(yè)面的交互執(zhí)行信息
我們每次編寫一個(gè)自己的APP的時(shí)候可以按照這個(gè)思路來(lái)組織我們的APP，每個(gè)頁(yè)面的元素的詳細(xì)講解，可能以后逐漸通過(guò)各個(gè)demo來(lái)逐步熟悉。
程序執(zhí)行結(jié)果如下圖：
image.png
