【Dash搭建可视化网站】项目5： 利用Dash 实现动态图表

手动反爬虫，禁止转载：原博地址 https://blog.csdn.net/lys_828/article/details/122075142（CSDN博主：Be_melting）

 知识梳理不易，请尊重劳动成果，文章仅发布在CSDN网站上，在其他网站看到该博文均属于未经作者授权的恶意爬取信息

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

至此整个项目5，利用Dash 实现动态图表就介绍完毕。本项目最核心的知识点就是在于如何利用官方示例完成自己想要的目标结果。