图表不随下拉列表更新(Dash Plotly)

Posted

技术标签:

【中文标题】图表不随下拉列表更新(Dash Plotly)【英文标题】:Graphs not updating with dropdown (Dash Plotly) 【发布时间】:2019-01-23 05:24:49 【问题描述】:

我正在尝试构建一个仪表板,其中图表根据下拉菜单中传递的值进行更新。

由于某种原因,图表不适应下拉菜单中的任何变化。这方面的特点是:

    肯定会收到输入:我创建了第二个函数,它具有相同的结构但更新了不同的字段。它工作正常。

    问题似乎出在图形显示上:我创建了一个不同版本的函数,其中更新函数将返回“none”作为默认值 1。图形的区域起初是空的,但在下拉列表中选择新值时,将更改为其中一个图表。显示图表后,该字段不会对下拉菜单中的任何进一步更改做出反应:无论是提示新图表的值还是返回默认值均不返回。

这是代码:

import dash
from dash.dependencies import Output, Event
import dash_core_components as dcc
import dash_html_components as html
import plotly
import plotly.graph_objs as go
from dash.dependencies import Input, Output
import collections


app = dash.Dash()

df = dm.return_all_pd_data(token = API_TOKEN)

app.layout = html.Div(children=[
    html.H1(children='''
        Month for graph:
    '''),
    dcc.Dropdown(
        id = "input",
        options=[
            'label': 'Jan', 'value': 1,
            'label': 'Feb', 'value': 2,
            'label': 'Mar', 'value': 3
        ], value = 1
    ),
    html.Div(id='output-graph'),
])

@app.callback(
    Output(component_id='output-graph', component_property='children'),
    [Input(component_id='input', component_property='value')])
def update_value(value):

    start = datetime.datetime(2018, value, 1, 0, 0, 0, 1)
    end = datetime.datetime(2018,  value + 1, 1, 0, 0, 0, 1)
    subset_df = df[ (df["lost_time"] > start) & (df["lost_time"] < end) ]

    x = pd.value_counts(subset_df.deal_source).index
    y = pd.value_counts(subset_df.deal_source).values

    return(dcc.Graph(
        id='output-graph',
        figure=
            'data': [
                'x': x, 'y': y, 'type': 'bar', 'name': value,
            ],
            'layout': 
                'title': "You selected month: ".format(value)
            
        
    ))


if __name__ == "__main__":

    app.run_server(debug = True)

【问题讨论】:

【参考方案1】:

我最终自己找到了解决方案。在这里回答,以防其他人可能有同样的问题。

问题是我试图更新 div 标签中的子元素。相反,事实证明创建一个空图表并编写函数来更新图表的图形元素要容易得多。

以下是结果证明可以工作的代码:

app = dash.Dash()

app.layout = html.Div(children=[
    html.H1(children='''
        Interactive Chart:
    '''),
    dcc.Dropdown(
        id = "input",
        options=[
            'label': 'January', 'value': 1,
            'label': 'Febuary', 'value': 2,
            'label': 'March', 'value': 3
        ], value = 1
    ),
    dcc.Graph( id="output-graph")
])

@app.callback(
    Output(component_id='output-graph', component_property='figure'),
    [Input(component_id='input', component_property='value')])
def update_value(value):

    start = datetime.datetime(2018, value, 1, 0, 0, 0, 1)
    end = datetime.datetime(2018,  value + 1, 1, 0, 0, 0, 1)
    subset_df = df[ (df["lost_time"] > start) & (df["lost_time"] < end) ]
    x = pd.value_counts(subset_df.deal_source).index
    y = pd.value_counts(subset_df.deal_source).values

    return('data': [
                'x': x, 'y': y, 'type': 'bar', 'name': value,
            ],
            'layout': 
                'title': "Deal Flow source for  2018".format(months[value-1])
            
        
    )

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

【讨论】:

以上是关于图表不随下拉列表更新(Dash Plotly)的主要内容,如果未能解决你的问题,请参考以下文章

带有一个下拉列表和多个选择器的 Plotly Dash 散点图(全部)

根据 python plotly dash 中先前单选项目/下拉列表中的选择禁用下拉列表

如何命名 Dash/Plotly 中的下拉菜单

如何通过 Python 中的 Plotly 从 Dash 的下拉列表中选择数据集列?

在 python 中使用 panda 库和 Dash Plotly 创建带有标签和值的下拉菜单

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