Plotly Dash 热图，链接到 2 个下拉菜单

Posted 2023-02-18

【中文标题】Plotly Dash 热图，链接到 2 个下拉菜单

【英文标题】：Plotly Dash heatmap, linked to 2 dropdowns

【发布时间】：2021-11-15 04:26:09

【问题描述】：

如何在 plotly dash 中创建一个应用程序，我想在其中创建一个链接到 2 个下拉列表的热图？ 下拉菜单从 Pandas DF 中读取，“my_dropdown1”和“my_dropdown2”。

【问题讨论】：

请提供足够的代码，以便其他人更好地理解或重现问题。

【参考方案1】：

我认为 Dash 文档中有一个很好的例子：基本回调，具有多个输入的 Dash 应用程序。 https://dash.plotly.com/basic-callbacks

此示例有 2 个下拉菜单和 2 个单选按钮。创建的图形是散点图。您可以重新格式化此示例以创建热图并使用两个下拉菜单。

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

import pandas as pd

app = dash.Dash(__name__)

df = pd.read_csv('https://plotly.github.io/datasets/country_indicators.csv')

available_indicators = df['Indicator Name'].unique()

app.layout = html.Div([
    html.Div([

        html.Div([
            dcc.Dropdown(
                id='xaxis-column',
                options=['label': i, 'value': i for i in available_indicators],
                value='Fertility rate, total (births per woman)'
            ),
            dcc.RadioItems(
                id='xaxis-type',
                options=['label': i, 'value': i for i in ['Linear', 'Log']],
                value='Linear',
                labelStyle='display': 'inline-block'
            )
        ], style='width': '48%', 'display': 'inline-block'),

        html.Div([
            dcc.Dropdown(
                id='yaxis-column',
                options=['label': i, 'value': i for i in available_indicators],
                value='Life expectancy at birth, total (years)'
            ),
            dcc.RadioItems(
                id='yaxis-type',
                options=['label': i, 'value': i for i in ['Linear', 'Log']],
                value='Linear',
                labelStyle='display': 'inline-block'
            )
        ], style='width': '48%', 'float': 'right', 'display': 'inline-block')
    ]),

    dcc.Graph(id='indicator-graphic'),

    dcc.Slider(
        id='year--slider',
        min=df['Year'].min(),
        max=df['Year'].max(),
        value=df['Year'].max(),
        marks=str(year): str(year) for year in df['Year'].unique(),
        step=None
    )
])


@app.callback(
    Output('indicator-graphic', 'figure'),
    Input('xaxis-column', 'value'),
    Input('yaxis-column', 'value'),
    Input('xaxis-type', 'value'),
    Input('yaxis-type', 'value'),
    Input('year--slider', 'value'))
def update_graph(xaxis_column_name, yaxis_column_name,
                 xaxis_type, yaxis_type,
                 year_value):
    dff = df[df['Year'] == year_value]

    fig = px.scatter(x=dff[dff['Indicator Name'] == xaxis_column_name]['Value'],
                     y=dff[dff['Indicator Name'] == yaxis_column_name]['Value'],
                     hover_name=dff[dff['Indicator Name'] == yaxis_column_name]['Country Name'])

    fig.update_layout(margin='l': 40, 'b': 40, 't': 10, 'r': 0, hovermode='closest')

    fig.update_xaxes(title=xaxis_column_name,
                     type='linear' if xaxis_type == 'Linear' else 'log')

    fig.update_yaxes(title=yaxis_column_name,
                     type='linear' if yaxis_type == 'Linear' else 'log')

    return fig


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