时间戳

首页 > 解决方案 > 如何在 Dash 中更新等值线图

python - 如何在 Dash 中更新等值线图

问题描述

我正在使用 Python 和 Dash 制作一个 webapp，这个 webapp 包含一个世界的等值线地图，其中包含基于所选年份的数据。我希望能够更改年份并更新地图以匹配该年份。我更喜欢使用 Dash 滑块来执行此操作，尽管我也希望有任何其他方式。

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

布局：使用 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
    )]
)            
        }
    )

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

标签： pythonplotlyplotly-dash

解决方案

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

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

图表已经在页面上，您必须更改回调，以便它更新figureprop 的而Graph不是.childrendiv

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

推荐阅读