时间戳

首页 > 解决方案 > 动态更新 Dash Plotly 中的标题

python - 动态更新 Dash Plotly 中的标题

问题描述

我创建了这个非常简化的示例，我希望在下拉标签更改时动态更新图表的标题。这是代码：

data = {'Stock': ['F',  'NFLX',  'AMZN'], 'Number': [10, 15, 7]}
df = pd.DataFrame(data, columns=['Stock', 'Number'])
stock_options = df['Stock']

app = dash.Dash(__name__)

app.layout = html.Div(children=[
    html.H1(children='Example Bar Chart'),
    html.Div([
        dcc.Dropdown(
            id='dropdown',
            options=[{'label': i, 'value': i} for i in stock_options],
            value='F',

         ),
        html.Div(dcc.Graph(id='graph')),
    ]),
])


@app.callback(
   Output(component_id='graph', component_property='figure'),
   Input(component_id='dropdown', component_property='value')
)
def update_graph(stock):
    msk = df.Stock.isin([stock])
    figure = px.bar(df[msk], x='Stock', y='Number', title=f"{stock} open price")

    return figure


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

因此，虽然在下拉菜单中保留相同的标签而不是标题中的“F 开盘价”，但我想获得“Facebook 开盘价”......等等。我试图解决这个问题，map但我无法让它工作。有人可以指出如何解决这个问题的方向吗？提前致谢。

标签： pythonplotly-dash

解决方案

正如我在评论中所写，不确定如何存储符号名称和图表中显示的标题之间的映射。这是一种使用stock_name_mapping包含符号 als 键和显示名称作为值的字典的解决方案：

import pandas as pd
import dash
from dash.dependencies import Input, Output
import dash_html_components as html
import dash_core_components as dcc

import plotly.express as px

data = {'Stock': ['F',  'NFLX',  'AMZN'], 'Number': [10, 15, 7]}
df = pd.DataFrame(data, columns=['Stock', 'Number'])
stock_options = df['Stock']

stock_name_mapping = {'F': 'Facebook',
                      'NFLX': 'Netflix',
                      'AMZN': 'Amazon'}

app = dash.Dash(__name__)

app.layout = html.Div(children=[
    html.H1(children='Example Bar Chart'),
    html.Div([
        dcc.Dropdown(
            id='dropdown',
            options=[{'label': i, 'value': i} for i in stock_options],
            value='F',

         ),
        html.Div(dcc.Graph(id='graph')),
    ]),
])


@app.callback(
   Output(component_id='graph', component_property='figure'),
   Input(component_id='dropdown', component_property='value')
)
def update_graph(stock):
    msk = df.Stock.isin([stock])
    stock_name = stock_name_mapping[stock]
    figure = px.bar(df[msk], x='Stock', y='Number', title=f"{stock_name} open price")

    return figure


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

推荐阅读