Dash散点图按国家名着色后hoverData匹配异常问题

你的问题出在单独提取各字段的Series时，索引错位导致字段匹配错误。Plotly Express在处理独立传入的x/y/hover_name/color时，是按索引位置而非国家名称来关联数据的，如果过滤后的Series索引不统一，就会出现hover名称、颜色和散点位置不对应的情况，进而影响后续时间序列图表的关联逻辑。

解决方案：先整理数据为宽表格式 #

先把原始数据转换为「每个国家一行，包含X/Y轴指标数值」的宽表，再直接传入px.scatter，让Plotly自动关联所有字段，避免索引错位问题。

数据整理代码示例

# 转换为宽表：Country Name作为行，Indicator Name作为列，Value作为单元格值
wide_df = dff.pivot(
    index='Country Name',
    columns='Indicator Name',
    values='Value'
).reset_index()

修改后的散点图代码

fig = px.scatter(
    wide_df,
    x=xaxis_column_name,  # 直接用X轴指标的列名
    y=yaxis_column_name,  # 直接用Y轴指标的列名
    hover_name='Country Name',
    color='Country Name'
)

为什么这样能解决问题 #

宽表格式下，每个国家的X/Y指标值、国家名称都在同一行，Plotly会自动基于行数据关联所有字段，确保hover显示的国家名称、散点颜色和坐标完全对应，后续时间序列图表的关联逻辑也能正常获取正确的国家名称。

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