正在使用 hoverData 更新 dbc.Card

Question

我有以下骨架代码


# ------------------------------
#       IMPORT LIBRARIES
# ------------------------------


# Import Dash and Dash Bootstrap Components
import dash
import dash_bootstrap_components as dbc
from dash import Input, Output, dcc, html, dash_table, State
import dash_leaflet as dl

# Import Core Libraries
import pandas as pd
import plotly.express as px
import plotly.graph_objects as go
from dash import Input, Output, dcc, html, dash_table


token='my_token'


FONT_AWESOME = "https://use.fontawesome.com/releases/v5.10.2/css/all.css"


# Import data 

data_url = 'https://docs.google.com/spreadsheets/d/e/2PACX-1vSGcAFoXyMXk7lj3KJrpzKd5XiBufm2xa7M39QNZxw5ma0TZhP35q-mf2ybyf9cZQdEwsoWkHiQWfjC/pub?gid=0&single=true&output=csv'

df = pd.read_csv(data_url)

app = dash.Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP,FONT_AWESOME], title='CONFIRM - SK4U', update_title=None,
    meta_tags=[{"name": "viewport", "content": "width=device-width, initial-scale=0.7, minimum-scale=0.4"}],
    )

server = app.server

fig_map = px.scatter_mapbox(df,lat='latitude',lon='longitude',
                            mapbox_style='mapbox://styles/vostpt/cl1w0k6uf000415nt86nk7uv2',
                            #color='Kategória / Category',
                            width=1400,height=700,
                            hover_name='name',
                            
                            #center=[48.799330977271445,19.338585158029197],
                            center=dict(lon=20.0068, lat=48.8264),
                            zoom=7,
                            custom_data=['name']
                            )

fig_map.update_layout(
        hoverlabel=dict(
        bgcolor="white",
        font_size=16,
        font_family="sans-serif"
        )
    )   

fig_map.update_layout(mapbox = dict(accesstoken = token, style ='mapbox://styles/vostpt/cl1w0k6uf000415nt86nk7uv2'))


app.layout = html.Div(
            [
            dbc.Row(
                [
                dbc.Col(
                    dbc.Card(
                        dbc.CardBody(
                            [
                                html.H4("Title", className="card-title"),
                                html.H6("Card subtitle", className="card-subtitle"),
                                html.P(id="card_data"),
                                dbc.CardLink("Card link", href="#"),
                                dbc.CardLink("External link", href="https://google.com"),
                            ]
                        ),
                    
                    ),

                ),
                dbc.Col(
                    dcc.Graph(id="my_map",figure=fig_map),
                xs=12,
                ),
                ],
                ),
            
            ],
)

@app.callback(
    Output(component_id="card_data", component_property="children"),
    Input(component_id="my_map", component_property="hoverData")
)

def upgrade_card(hoverData):
    title = hoverData['name'][0]
    return title 

if __name__ == "__main__":
    app.run_server(host='0.0.0.0', debug=True)

我的 objective 是在鼠标悬停时使用数据框中的数据更新卡片中的文本。该应用程序从 hoverData 接收输入，但 returns 错误消息

TypeError: 'NoneType' object is not subscriptable

如有任何帮助，我们将不胜感激。

免责声明：该解决方案将用于非营利性 NGO 的项目。不得将解决方案用于商业用途

Answer 1

当您没有正确初始化时，通常会出现这些错误。 p 标签的 children 在您的示例中是 non-existent，因此无法更新它们。

因此，将 html.P(id="card_data") 替换为 html.P("", id="card_data")。

正在使用 hoverData 更新 dbc.Card

Updating dbc.Card with hoverData

python

plotly-dash