【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后输出的结果如下。