如何在NiceGUI中点击Plotly地图时显示DataFrame属性？

已实现点击Plotly地图时显示经纬度，但需要点击标记时展示DataFrame中对应点的所有属性（如站点编号、河流名称等），原代码无法正确获取并显示这些属性。以下是修复后的完整解决方案：

import pandas as pd
import plotly.graph_objects as go
from nicegui import ui, events

df = pd.DataFrame([
    [12345, -95, 45, 'Cross River'],
    [12346, -94, 43, 'Snake River'],
    [12347, -92, 45, 'Temple River'],
    [12348, -96, 46, 'Gold River'],
    [12349, -95.5, 44.5, '#FT Ty7']],
    columns=['site', 'long', 'lat', 'name']
)

fig = go.Figure(go.Scattermap(
    mode='markers',
    lon=df['long'],
    lat=df['lat'],
))
fig.update_layout(
    margin=dict(l=0, r=0, t=0, b=0),
    width=400,
    showlegend=False,
    map={
        'style': 'satellite-streets',
        'center': {'lon': df['long'].mean(), 'lat': df['lat'].mean()},
        'zoom': 5
    }
)
plot = ui.plotly(fig)

label = ui.label("Click on a point for more information.")

def handle_click(e: events.GenericEventArguments):
    # 从Plotly点击事件中提取选中点的索引
    point_index = e.args['points'][0]['pointNumber']
    # 获取DataFrame中对应索引的整行数据
    selected_row = df.iloc[point_index]
    # 动态格式化所有属性为可读文本
    display_text = '\n'.join([f'{col}: {val}' for col, val in selected_row.items()])
    label.text = display_text

plot.on('plotly_click', handle_click)

ui.run()

关键改动说明 #

• 修正事件参数解析：原代码错误地直接使用e.args作为索引，实际上Plotly的plotly_click事件返回的参数是包含points数组的字典，选中点的索引需从e.args['points'][0]['pointNumber']获取
• 获取全量行数据：通过df.iloc[point_index]取出DataFrame中对应索引的整行记录，无需单独提取每个字段
• 动态生成显示文本：遍历行的键值对，自动拼接所有属性的显示内容，适配DataFrame结构变化
• 简化地图中心计算：用Pandas内置的mean()方法替代手动求和计算中心经纬度，代码更简洁

内容的提问来源于stack exchange，提问作者DrewGIS