作者：俊欣

來源：關于數據分析與可視化

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

Dash框架中的兩個基本概念

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

Layout
Callbacks

Layout顧名思義就是用來設計可視化大屏的外觀和布局，添加一些例如下拉框、單選框、復選框、輸入框、文本框、滑動條等組件，其中Dash框架對html標簽也進行了進一步的封裝，使得我們直接可以通過Python代碼來生成和設計每一個網頁所需要的元素，例如

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

我們轉化成Dash的Python結構就是

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

Callbacks也就是回調函數，基本上是以裝飾器的形式來體現的，實現前后端異步通信的交互，例如我們在點擊按鈕或者下拉框之后出現的功能就是通過回調函數來實現的。

安裝和導入模塊

在導入模塊之前，我們先用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模塊，因為我們需要用到的數據來自該模塊，里面是一眾互聯網公司過去一段時間中股價的走勢

import dash
import dash_html_components as html
import dash_core_components as dcc
import plotly.graph_objects as go
import plotly.express as px

讀取數據并且繪制折線圖

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

App = dash.Dash()   #實例化Dash
df = px.data.stocks() #讀取股票數據 

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復制到瀏覽器當中便可以看到出來的結果了，如下所示

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

添置一個下拉框

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

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

output

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

df.head()

output

添加回調函數

最后我們將下拉框和繪制折線圖的函數給連接起來，我們點擊下拉框選中不同的選項的時候，折線圖也會相應的產生變化，

@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參數，里面的component_id對應的是下拉框的id也就是dropdown，而Output參數，當中的component_id對應的是折線圖的id也就是bar_plot，我們來看一下最后出來的結果如下

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

import dash
import dash_html_components as html
import dash_core_components as dcc
import plotly.graph_objects as go
import plotly.express as px
from dash.dependencies import Input, Output

app = 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 fig

if __name__ == '__main__':
    app.run_server()