【Dash搭建可視化網站】項目5： 利用Dash 實作動态圖表

作者：Be_melting

項目5： 利用Dash 實作動态圖表

基于項目4的基礎上，可以再利用項目3中的callback方法，進行繪制動态互動圖。項目4中介紹Plotly與Dash結合時候，就有一個動态實作圖表顔色更換的官方案例，項目5也是做一個下拉菜單的動态圖表。

可以把官網的示例代碼拿過來進行修改。基本上隻修改了下拉選項和預設值以及繪圖函數三部分的資訊，也就是下面代碼中注釋的部分。

import dash
from dash import dcc
from dash import html
from dash.dependencies import Input, Output
import plotly.express as px
import pandas as pd

app = dash.Dash(__name__)

df = pd.read_csv('all_seasons.csv')         

app.layout = html.Div([
    dcc.Dropdown(
        id="dropdown",
        options=[
            {'label': x, 'value': x}     #這一部分修改為想要顯示的字段名稱
            for x in ['player_height', 'player_weight', 'age']  
        ],
        value='player_height'  #設定一個預設值
    ),
    dcc.Graph(id="graph"),
])

@app.callback(
    Output("graph", "figure"), 
    [Input("dropdown", "value")])
def update(v):  #定義一個函數，然後修改繪圖的方式，傳回的是一個字段的名稱
    return px.scatter(x=df[v],y=df['pts'])

app.run_server(debug=True)      

儲存檔案後，重新整理網址：http://127.0.0.1:8050/ ，輸出結果如下。

通過下拉菜單選擇play_weight後，輸出的結果如下。

選擇age後輸出的結果如下。