Question

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

由于某些原因，图表无法适应下拉菜单中的任何更改。对此的特殊之处是：

可以肯定收到输入：我创建了第二个函数，该函数具有相同的结构，但更新了另一个字段。工作正常。
问题似乎出在图形显示上：我创建了该函数的另一个版本，其中更新函数对于默认值1返回“ none”。图形的区域最初是空的，但是在下拉列表中选择新值后，将更改为其中一张图表。显示图表后，该字段将不会对下拉菜单中的任何进一步更改作出反应：既不提示新图表的值也不返回默认值，不返回任何新值。

这是代码：

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)

Answer 1

我最终能够自己找到解决方案。如果有人可能遇到相同的问题，请在这里回答。

问题是我试图更新div标签中的children元素。相反，事实证明，创建空图表和编写函数以更新图表的Figure元素要容易得多。

下面是有效的代码：

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)

图表未通过下拉菜单更新（虚线显示）

1 个答案: