作者： 俊欣

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

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

Dash框架中的兩個基本概念

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

• Layout
• callbacks

Layout顧名思義就是用來設計可視化大屏的外觀和布局，添加一些例如下拉框、單選框、復選框、輸入框、文本框、滑動條等組件，其中dash框架對html標簽也進行了進一步的封裝，使得我們直接可以通過Python代碼來生成和設計每一個網(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)的，實現(xiàn)前后端異步通信的交互，例如我們在點擊按鈕或者下拉框之后出現(xiàn)的功能就是通過回調(diào)函數(shù)來實現(xiàn)的。

安裝和導入模塊

在導入模塊之前，我們先用pip命令來進行安裝，

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

然后我們導入這些剛剛安裝完的模塊，其中dash-html-components用來生成HTML標簽，dash-core-components模塊用來生成例如下拉框、輸入框等組件，這里我們還需要用到plotly模塊，因為我們需要用到的數(shù)據(jù)來自該模塊，里面是一眾互聯(lián)網(wǎng)公司過去一段時間中股價的走勢

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() #實例化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='股價隨著時間的變幻', xaxis_title='日期', yaxis_title='價格' ) 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()

我們點擊運行之后會按照提示將url復制到瀏覽器當中便可以看到出來的結(jié)果了，如下所示

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

添置一個下拉框

然后我們再添置一個下拉框，當我們點擊這個下拉框的時候，可是根據(jù)我們的選擇展示不同公司的股價，代碼如下

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

output

options參數(shù)中的label對應的是下拉框中的各個標簽，而value對應的是DataFrame當中的列名

df.head()

Output

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

最后我們將下拉框和繪制折線圖的函數(shù)給連接起來，我們點擊下拉框選中不同的選項的時候，折線圖也會相應的產(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='股價隨著時間的變幻', xaxis_title='日期', yaxis_title='價格' ) return fig

我們看到callback()方法中指定輸入和輸出的媒介，其中Input參數(shù)，里面的component_id對應的是下拉框的id也就是dropdown，而Output參數(shù)，當中的component_id對應的是折線圖的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='股價隨著時間的變幻', xaxis_title='日期', yaxis_title='價格' ) return figif __name__ == '__main__': app.run_server()