如何在 Plotly 中向密度热图的悬停添加更多数据？

Question

我有一个使用 Plotly 库的密度热图，特别是 Plotly Express for Python。其中，x 轴对应于“总计”数据框中的“父亲的教育程度”列，y 轴对应于“母亲的教育程度”列，z 轴对应于“百分比”列。我想要的是在悬停信息中另外包含“频率”列，以便将鼠标悬停在单元格上时也会显示此数据。我尝试使用“文本”参数，但它不适用于密度热图。因此，我目前正在尝试使用“meta”参数，但它显示的是“%{data[n[.meta[i]}”而不是频率。

fig_heatmap = px.density_heatmap(total,
                                 x='Estudios de la madre',
                                 y='Estudios del padre',
                                 z='Porcentaje',
                                 category_orders={'Estudios de la madre': orden_estudios,
                                                      'Estudios del padre': orden_estudios},
                                 text_auto=True,
                                 color_continuous_scale='blues',
                                 range_color=[0, 15])
fig_heatmap.update_coloraxes(colorbar_title='Porcentaje')
fig_heatmap.update_traces(meta=total.Frecuencia,
                          hovertemplate='Estudios de la madre: %{x}<br>' +
                                       'Estudios del padre: %{y}<br>' +
                                       'Porcentaje: %{z}<br>' +
                                       'Frecuencia: %{data[n[.meta[i]}')
                             

st.plotly_chart(fig_heatmap, use_container_width=True)

以下是一些示例数据：

data = [
    ("Primaria o secundaria", "Primaria o secundaria", 320, 41.03),
    ("Primaria o secundaria", "Bachillerato", 120, 15.42),
    ("Bachillerato", "Bachillerato", 150, 19.27),
    ("Bachillerato", "Primaria o secundaria", 80, 10.27),
    ("Primaria o secundaria", "Carrera técnica", 50, 6.42),
    ("Primaria o secundaria", "No sé", 40, 5.14),
    ("Carrera técnica", "Carrera técnica", 30, 3.85),
    ("Carrera técnica", "Primaria o secundaria", 20, 2.57),
    ("No sé", "No sé", 20, 2.57),
    ("Bachillerato", "Carrera técnica", 10, 1.28),
    ("Licenciatura", "Primaria o secundaria", 10, 1.28),
    ("Carrera técnica", "Bachillerato", 5, 0.64),
    ("Primaria o secundaria", "Licenciatura", 5, 0.64),
    ("Bachillerato", "Licenciatura", 5, 0.64),
    ("Bachillerato", "No sé", 5, 0.64),
    ("Licenciatura", "Bachillerato", 5, 0.64),
    ("Licenciatura", "Licenciatura", 5, 0.64),
    ("No sé", "Primaria o secundaria", 5, 0.64),
    ("Licenciatura", "No sé", 5, 0.64),
    ("Carrera técnica", "Licenciatura", 5, 0.64),
    ("Licenciatura", "Carrera técnica", 5, 0.64),
    ("Carrera técnica", "No sé", 5, 0.64),
    ("No sé", "Bachillerato", 5, 0.64),
    ("No sé", "Carrera técnica", 5, 0.64),
    ("Posgrado", "Primaria o secundaria", 5, 0.64),
    ("Carrera técnica", "Posgrado", 5, 0.64),
    ("Posgrado", "Carrera técnica", 5, 0.64),
    ("Posgrado", "Bachillerato", 5, 0.64),
    ("Posgrado", "Posgrado", 5, 0.64),
    ("No sé", "Licenciatura", 5, 0.64),
    ("Bachillerato", "Posgrado", 5, 0.64),
    ("Posgrado", "Licenciatura", 5, 0.64),
    ("Licenciatura", "Posgrado", 5, 0.64),
    ("Posgrado", "No sé", 5, 0.64),
    ("Primaria o secundaria", "Posgrado", 5, 0.64)
]

Answer 1

如果要将自定义数据添加到悬停模板中，则它必须等于图形的数据结构。在本例中，它是一个热图，因此需要多个行和列的数组。我将提交的数据转换为水平格式，以匹配图表的数据结构并对每个类别列进行排序。该数据框的整个部分以数组的形式提供给自定义数据。

import pandas as pd
total = pd.DataFrame(data)
total.columns = ['Estudios de la madre','Estudios del padre','Frecuencia','Porcentaje']

df = total.pivot(index='Estudios del padre', columns='Estudios de la madre', values='Frecuencia')
col_order = ['Primaria o secundaria','Bachillerato','Carrera técnica','No sé','Licenciatura','Posgrado']
df = df.reindex(columns=col_order)
df = df.reindex(index=col_order) 

import plotly.express as px

fig_heatmap = px.density_heatmap(total,
                                 x='Estudios de la madre',
                                 y='Estudios del padre',
                                 z='Porcentaje',
                                 # category_orders={'Estudios de la madre': orden_estudios,
                                 #                      'Estudios del padre': orden_estudios},
                                 text_auto=True,
                                 color_continuous_scale='blues',
                                 range_color=[0, 15])
fig_heatmap.update_coloraxes(colorbar_title='Porcentaje')
fig_heatmap.update_traces(meta=df.values,
                          hovertemplate='Estudios de la madre: %{x}<br>' +
                                       'Estudios del padre: %{y}<br>' +
                                       'Porcentaje: %{z}<br>' +
                                       'Frecuencia: %{meta}')
                             
fig_heatmap.show()
#st.plotly_chart(fig_heatmap, use_container_width=True)