上一篇介紹了python數(shù)據(jù)可視化的Dash模塊，演示了如何生成靜態(tài)圖表，本篇進(jìn)入交互式圖表部分。用Dash構(gòu)建一個(gè)交互式數(shù)據(jù)可視化應(yīng)用只需要兩樣?xùn)|西，交互控件和回調(diào)函數(shù)。

01 交互控件

dash在其官方依賴庫dash_core_components中內(nèi)置了眾多常見網(wǎng)頁小部件，是我們實(shí)現(xiàn)交互式所依托的重要元素。

from dash import Dash

import dash_core_components as dcc

import dash_html_components as html

app = Dash() 
app.layout = html.Div([  
    html.Label('單選下拉菜單'),  
    html.Br(),   
    dcc.Dropdown(       
        options=[          
            {'label': 'beijing', 'value': 'BJ'},        
            {'label': 'shanghai', 'value': 'SH'}        ],    
        value='BJ'  # 默認(rèn)選中
    ),  
    html.Label('多選下拉菜單'),   
    html.Br(),    
    dcc.Dropdown(
        options=[    
            {'label': 'beijing', 'value': 'BJ'},         
            {'label': 'shanghai', 'value': 'SH'}        ],        
     value=['BJ', 'SH'],        
     multi=True   # 是否多選   
    ),     
    html.Label('單選按鈕'),
    html.Br(),    
    dcc.RadioItems(        
        options=[            
            {'label': 'beijing', 'value': 'BJ'},           
            {'label': 'shanghai', 'value': 'SH'}       
        ],        
        value='BJ'    
    ),     
    html.Label('復(fù)選按鈕'),    
    html.Br(),    
    dcc.Checklist(        
        options=[            
            {'label': 'beijing', 'value': 'BJ'},            
            {'label': 'shanghai', 'value': 'SH'}       ],        
        value=['BJ', 'SH']    
    ),     
    html.Label('文本輸入框'),    
    html.Br(),    
    dcc.Input(        
        value='BJ',        
        type='text'    
    ),    
    html.Br(),     
    html.Label('滑動塊'),    
    html.Br(),    
    dcc.Slider(        
        min=0,        
        max=9,        
        marks={i: 'Label {}'.format(i) if i == 1 else str(i) for i in range(1, 6)},  # 標(biāo)記
        value=5,  # 默認(rèn)值    
    ),
    
], style={'columnCount': 1})
if __name__ == '__main__':    
    app.run_server()

dash高度封裝了react.js，我們可以不用編寫js代碼即可完成前端與后端之間的異步交互。

from dash import Dash

import dash_html_components as html

import dash_core_components as dcc

from dash.dependencies import Input, Output

app = Dash()

province2city_dict = {
    '四川省': '成都市',    
    '陜西省': '西安市',    
    '廣東省': '廣州市'
}
app.layout = html.Div(    
    [        
        html.H1('根據(jù)省名查詢省會城市：'),        
        html.Br(),        
        dcc.Dropdown(            
            id='province',  # 第一個(gè)id，輸入的地方            
            options=[                
                {'label': '四川省', 'value': '四川省'},                
                {'label': '陜西省', 'value': '陜西省'},                
                {'label': '廣東省', 'value': '廣東省'}            
            ],            
            value='四川省'        
        ),        
        html.P(id='city')   # 第二個(gè)id，輸出的地方    ]
    
)
@app.callback(Output('city', 'children'), Input('province', 'value'))  # 定義了哪個(gè)輸入對應(yīng)哪個(gè)輸出

def province2city(province):    
    return province2city_dict[province]
if __name__ == '__main__':    
    app.run_server()

03 交互式圖表

有了交互控件和回調(diào)函數(shù)的知識，將兩者結(jié)合起來，我們可以構(gòu)建一個(gè)交互式的圖表。例子如下：

import pandas as pd

import numpy as np

from dash import Dash, dependencies

import dash_core_components as dcc

import dash_html_components as html

import plotly.graph_objs as go

app = Dash()
# 數(shù)據(jù)載入
df = pd.read_csv('https://raw.githubusercontent.com/ffzs/dataset/master/insurance.csv')
app.layout = html.Div([    
    html.Div([        
        html.Label('Gender'),        
        html.Div([            
            dcc.Dropdown(   # 功能性組件，設(shè)定id值作為標(biāo)簽關(guān)聯(lián)callback函數(shù)中的標(biāo)簽                
                id='gender',               
                options=[{'label': i, 'value': i} for i in ['female', 'male']],                
                value='female'),        
        ]),
        html.Label('Color'),        
        html.Div([            
            dcc.Dropdown(                
                id='color',                
                options=[{'label': i, 'value': i} for i in ['region', 'smoker', 'children']],                
                value='region'),        
        ]),    
    ]),
    html.Div([        
        dcc.Graph(id='scatter')    # 關(guān)聯(lián)graph    
    ])
    
])
# 對callback函數(shù)進(jìn)行設(shè)置，與上面的對應(yīng)，將數(shù)據(jù)return回對應(yīng)id的Graph
@app.callback(    
    dependencies.Output('scatter', 'figure'),    
    [dependencies.Input('gender','value'), dependencies.Input('color','value')]
    
)
def update_scatter(value_gender, value_color):    
    grouped = df.groupby('sex')  # 以性別分組    
    data = grouped.get_group(value_gender)  # 獲取選取的性別為變量    
    color_class = pd.Categorical(data[value_color])   # 將顏色分類數(shù)據(jù)明確化    
    s = [(np.sqrt(i)+2) for i in data['age']]   # 將年齡數(shù)據(jù)開方用大小表示用以區(qū)別年齡大
小        
    trace = go.Scatter(        
        x=data["bmi"],        
        y=data["charges"],        
        mode='markers',        
        marker=dict(            
            size=s,            
            sizemode='diameter',            
            sizeref=0,            
            color=color_class.codes,            
            colorscale='Earth'        
        )    
    )
    layout = go.Layout(margin=dict(l=20, r=20, t=0, b=30))    
    fig = go.Figure(data=[trace], layout=layout)    
    return fig
if __name__ == '__main__':    
    app.run_server()  # 運(yùn)行app

-END-