如何在 Dash 中更新等值线图

Question

我正在使用 Python 和 Dash 制作一个网络应用程序，这个网络应用程序包括一张世界地图，其中包含基于所选年份的数据。我希望能够更改年份并同时更新地图以匹配那一年。我更喜欢使用 Dash 滑块来执行此操作，尽管我也希望使用其他任何方式。

我试过使用文本输入更新其他图表，例如折线图，这很有效，但是当我将其更改为等值线图时，它停止了更新。它现在只创建地图，但不会显示更新。我在更新函数中放置了一些打印文本，它确认当我更改输入时它确实被调用，但图表只是没有更新。

layout:withdcc.input我要更新html.Div'my-div'

app.layout = html.Div( children=[
    html.H1(
        children='UN Sustainable Development goal: Poverty',
        style={
            'textAlign': 'center',
            'color': colors
        }
    ),
    dcc.Input(id='my-id',value='30', type='text'),
    html.Div(id='my-div')
    ,
    daq.Slider(
        id='my-daq-slider',
        min=1,
        max=sliderlength,
        step=1,
    ),
    html.Div(id='slider-output')

    

    
],        style={
        'textAlign': 'center'
    })

更新部分

@app.callback(
    Output('my-div', 'children'),
    [Input('my-id', 'value')])

def update_output_div(input_value):
    return dcc.Graph(
        id='my-div',

        figure={'data': [go.Choropleth(
    locations = df_pov['Country Code'],
    z = df_pov.iloc[:,int(input_value)],
    text = df_pov['Country Name'],
    
    autocolorscale = True,
    reversescale = False,
    marker = go.choropleth.Marker(
        line = go.choropleth.marker.Line(
            color = 'rgb(180,180,180)',
            width = 0.5
        )),
    colorbar = go.choropleth.ColorBar(
        tickprefix = '%',
        title = '%  below 1.90$ '),
)],
                'layout': go.Layout(
    title = go.layout.Title(
        text = list(df_pov)[int(input_value)]
    ),
    geo = go.layout.Geo(
        showframe = False,
        showcoastlines = False,
        projection = go.layout.geo.Projection(
            type = 'equirectangular'
        )
    ),
    annotations = [go.layout.Annotation(
        x = 0.55,
        y = 0.1,
        xref = 'paper',
        yref = 'paper',
        text = 'Source: Kaggle',
        showarrow = False
    )]
)            
        }
    )

我所期望的：更改文本输入或滑块输入时更新等值线。实际：地图创建一次（具有应该更新它的相同功能），但不会更新。

Answer 1

Dash 不喜欢像这样加载新组件。尝试通过向布局添加一个空图表来初始化您的图表，如下所示：

html.Div(id='my-div', children=[
        dcc.Graph(
            id='my-graph-id',
            figure=dict(
                data=[],
                layout={},
            ),
        )
    ])

如果图表已经在页面上，您将必须更改回调，以便它更新 Graph 的 figure 道具而不是 children 的 [=] 14=].

此外，您有多个相同的 ID。达什不喜欢那样。确保每个 ID 都是唯一的。如果所有这些仍然不起作用，我可能需要请您 post 提供更多详细信息，以便我进一步提供帮助。祝你好运！

如何在 Dash 中更新等值线图

How to update choropleth map in Dash

python

plotly

plotly-dash

layout:withdcc.input我要更新html.Div'my-div'

更新部分