作者： 俊欣

來源：關(guān)于數(shù)據(jù)分析與可視化

今天小編來為大家安利另外一個(gè)用于繪制可視化圖表的Python框架，名叫Dash，建立在Flask、Plotly.js以及React.js的基礎(chǔ)之上，在創(chuàng)建之出的目的是為了幫助前端知識(shí)匱乏的數(shù)據(jù)分析人員，以純Python編程的方式快速制作出交互特性強(qiáng)的數(shù)據(jù)可視化大屏，在經(jīng)過多年的迭代發(fā)展，如今不僅僅可以用來開發(fā)在線數(shù)據(jù)可視化作品，即便是輕量級(jí)的數(shù)據(jù)儀表盤、BI應(yīng)用甚至是博客或者是常規(guī)的網(wǎng)站都隨處可見Dash框架的影子，今天小編就先來介紹一下該框架的一些基礎(chǔ)知識(shí)，并且來制作一個(gè)簡單的數(shù)據(jù)可視化大屏。

Dash框架中的兩個(gè)基本概念

我們先來了解一下Dash框架中的兩個(gè)基本概念

• Layout
• callbacks

Layout顧名思義就是用來設(shè)計(jì)可視化大屏的外觀和布局，添加一些例如下拉框、單選框、復(fù)選框、輸入框、文本框、滑動(dòng)條等組件，其中dash框架對(duì)html標(biāo)簽也進(jìn)行了進(jìn)一步的封裝，使得我們直接可以通過Python代碼來生成和設(shè)計(jì)每一個(gè)網(wǎng)頁所需要的元素，例如

<div> <h1>Hello World!!</h1> <div> <p>Dash converts Python classes into HTML</p> </div></div>

我們轉(zhuǎn)化成Dash的Python結(jié)構(gòu)就是

html.Div([ html.H1('Hello Dash'), html.Div([ html.P('Dash converts Python classes into HTML'), ])])

Callbacks也就是回調(diào)函數(shù)，基本上是以裝飾器的形式來體現(xiàn)的，實(shí)現(xiàn)前后端異步通信的交互，例如我們?cè)邳c(diǎn)擊按鈕或者下拉框之后出現(xiàn)的功能就是通過回調(diào)函數(shù)來實(shí)現(xiàn)的。

安裝和導(dǎo)入模塊

在導(dǎo)入模塊之前，我們先用pip命令來進(jìn)行安裝，

! pip install dash ! pip install dash-html-components! pip install dash-core-components ! pip install plotly

然后我們導(dǎo)入這些剛剛安裝完的模塊，其中dash-html-components用來生成HTML標(biāo)簽，dash-core-components模塊用來生成例如下拉框、輸入框等組件，這里我們還需要用到plotly模塊，因?yàn)槲覀冃枰玫降臄?shù)據(jù)來自該模塊，里面是一眾互聯(lián)網(wǎng)公司過去一段時(shí)間中股價(jià)的走勢(shì)

import dashimport dash_html_components as htmlimport dash_core_components as dccimport plotly.graph_objects as goimport plotly.express as px

讀取數(shù)據(jù)并且繪制折線圖

那么我們讀取數(shù)據(jù)并且用plotly來繪制折線圖，代碼如下

app = dash.Dash() #實(shí)例化Dashdf = px.data.stocks() #讀取股票數(shù)據(jù) def stock_prices(): # 繪制折線圖 fig = go.Figure([go.Scatter(x=df['date'], y=df['AAPL'], line=dict(color='firebrick', width=4), name='Apple') ]) fig.update_layout(title='股價(jià)隨著時(shí)間的變幻', xaxis_title='日期', yaxis_title='價(jià)格' ) return fig app.layout = html.Div(id='parent', children=[ html.H1(id='H1', children='Dash 案例一', style={'textAlign': 'center', 'marginTop': 40, 'marginBottom': 40}), dcc.Graph(id='line_plot', figure=stock_prices())])if __name__ == '__main__': app.run_server()

我們點(diǎn)擊運(yùn)行之后會(huì)按照提示將url復(fù)制到瀏覽器當(dāng)中便可以看到出來的結(jié)果了，如下所示

從代碼的邏輯上來看，我們通過Dash框架中的Div方法來進(jìn)行頁面的布局，其中有參數(shù)id來指定網(wǎng)頁中的元素，以及style參數(shù)來進(jìn)行樣式的設(shè)計(jì)，最后我們將會(huì)指出來的圖表放在dcc.Graph()函數(shù)當(dāng)中。

添置一個(gè)下拉框

然后我們?cè)偬碇靡粋€(gè)下拉框，當(dāng)我們點(diǎn)擊這個(gè)下拉框的時(shí)候，可是根據(jù)我們的選擇展示不同公司的股價(jià)，代碼如下

dcc.Dropdown(id='dropdown', options=[ {'label': '谷歌', 'value': 'GOOG'}, {'label': '蘋果', 'value': 'AAPL'}, {'label': '亞馬遜', 'value': 'AMZN'}, ], value='GOOG'),

output

options參數(shù)中的label對(duì)應(yīng)的是下拉框中的各個(gè)標(biāo)簽，而value對(duì)應(yīng)的是DataFrame當(dāng)中的列名

df.head()

Output

添加回調(diào)函數(shù)

最后我們將下拉框和繪制折線圖的函數(shù)給連接起來，我們點(diǎn)擊下拉框選中不同的選項(xiàng)的時(shí)候，折線圖也會(huì)相應(yīng)的產(chǎn)生變化，

@app.callback(Output(component_id='bar_plot', component_property='figure'), [Input(component_id='dropdown', component_property='value')])def graph_update(dropdown_value): print(dropdown_value) # Function for creating line chart showing Google stock prices over time fig = go.Figure([go.Scatter(x=df['date'], y=df['{}'.format(dropdown_value)], line=dict(color='firebrick', width=4)) ]) fig.update_layout(title='股價(jià)隨著時(shí)間的變幻', xaxis_title='日期', yaxis_title='價(jià)格' ) return fig

我們看到callback()方法中指定輸入和輸出的媒介，其中Input參數(shù)，里面的component_id對(duì)應(yīng)的是下拉框的id也就是dropdown，而Output參數(shù)，當(dāng)中的component_id對(duì)應(yīng)的是折線圖的id也就是bar_plot，我們來看一下最后出來的結(jié)果如下

最后，全部的代碼如下所示

import dashimport dash_html_components as htmlimport dash_core_components as dccimport plotly.graph_objects as goimport plotly.express as pxfrom dash.dependencies import Input, Outputapp = dash.Dash() df = px.data.stocks() app.layout = html.Div(id='parent', children=[ html.H1(id='H1', children='Dash 案例一', style={'textAlign': 'center', 'marginTop': 40, 'marginBottom': 40}), dcc.Dropdown(id='dropdown', options=[ {'label': '谷歌', 'value': 'GOOG'}, {'label': '蘋果', 'value': 'AAPL'}, {'label': '亞馬遜', 'value': 'AMZN'}, ], value='GOOG'), dcc.Graph(id='bar_plot'),])@app.callback(Output(component_id='bar_plot', component_property='figure'), [Input(component_id='dropdown', component_property='value')])def graph_update(dropdown_value): print(dropdown_value) fig = go.Figure([go.Scatter(x=df['date'], y=df['{}'.format(dropdown_value)], line=dict(color='firebrick', width=4)) ]) fig.update_layout(title='股價(jià)隨著時(shí)間的變幻', xaxis_title='日期', yaxis_title='價(jià)格' ) return figif __name__ == '__main__': app.run_server()