Question

我正在使用Python和Dash制作一个Web应用程序，该Web应用程序包含一个世界choropleth地图，其中包含基于所选年份的数据。我希望能够更改年份，并以此来更新地图以匹配该年份。我更喜欢使用Dash滑块执行此操作，尽管我也希望通过其他方式进行此操作。

我尝试使用文本输入来更新其他图形（例如折线图），但这种方法行得通，但是当我将其更改为Choropleth映射时，它停止了更新。现在，它仅创建地图，但不显示其更新。我在更新函数中放入了一些打印文本，它确认我在更改输入时实际上已调用了该文本，但图形只是不更新。

布局：使用dcc.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={},
            ),
        )
    ])

在页面上已经有图形的情况下，您将不得不更改回调，以使其更新figure的{{1}}属性而不是{{1}的Graph }。

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

如何在Dash中更新Choropleth映射

布局：使用dcc.input我要更新html.Div'my-div'

更新部分

1 个答案: