矩阵列标题添加Tooltip：悬停国家显示对应大洲信息

核心思路是先建立国家-大洲的映射关系，再根据你使用的可视化工具，给列标题绑定hover提示。以下是几种常见场景的具体实现：

1. Python Plotly 实现 #

如果用Plotly绘制矩阵/热力图，可通过配置x轴的hover文本实现：

import plotly.graph_objects as go
import pandas as pd

# 假设你的数据存储在df中，包含country、continent和数值列
df = pd.DataFrame({
    'country': ['France', 'Canada', 'Japan'],
    'continent': ['Europe', 'North America', 'Asia'],
    'value': [8587, 6421, 7392]
})

# 构建国家-大洲映射字典
continent_map = df.set_index('country')['continent'].to_dict()

# 创建热力图
fig = go.Figure(data=go.Heatmap(
    z=df['value'].values.reshape(1, -1),  # 调整为矩阵格式
    x=df['country'].tolist(),
    y=['数值'],  # 行标题，根据实际数据修改
    hovertemplate='数值: %{z}<br>大洲: %{customdata}<extra></extra>',
    customdata=df['continent'].tolist()
))

# 给x轴列标题添加hover提示
fig.update_layout(
    xaxis=dict(
        tickvals=df['country'].tolist(),
        ticktext=df['country'].tolist(),
        hovertext=[continent_map[country] for country in df['country'].tolist()],
        hovertemplate='大洲: %{hovertext}<extra></extra>'
    )
)

fig.show()

2. Python Matplotlib + mplcursors 实现 #

如果用Matplotlib绘制矩阵，可借助mplcursors库给列标签绑定hover事件：

import matplotlib.pyplot as plt
import mplcursors
import pandas as pd

df = pd.DataFrame({
    'country': ['France', 'Canada', 'Japan'],
    'continent': ['Europe', 'North America', 'Asia'],
    'value': [8587, 6421, 7392]
})

countries = df['country'].tolist()
continents = df['continent'].tolist()
continent_map = dict(zip(countries, continents))

# 绘制矩阵
fig, ax = plt.subplots()
im = ax.imshow(df['value'].values.reshape(1, -1))

# 设置x轴标签
ax.set_xticks(range(len(countries)))
ax.set_xticklabels(countries)

# 给x轴标签添加hover提示
cursor = mplcursors.cursor(ax.get_xticklabels(), hover=True)
@cursor.connect("add")
def on_add(sel):
    country = sel.target.get_text()
    sel.annotation.set_text(f"大洲: {continent_map[country]}")

plt.show()

3. 前端HTML/CSS/JS 实现 #

如果是网页上的矩阵表格，直接给列标题<th>标签添加title属性即可，这是最简便的方式：

静态HTML写法 #

<table>
  <thead>
    <tr>
      <th title="Europe">France</th>
      <th title="North America">Canada</th>
      <th title="Asia">Japan</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>8587</td>
      <td>6421</td>
      <td>7392</td>
    </tr>
  </tbody>
</table>

动态JS写法（适合从后端获取数据的场景） #

// 假设从后端拿到的国家-大洲数据
const countryContinent = [
  { country: 'France', continent: 'Europe' },
  { country: 'Canada', continent: 'North America' },
  { country: 'Japan', continent: 'Asia' }
];

// 获取所有列标题元素
const headers = document.querySelectorAll('table thead th');

// 动态设置hover提示
headers.forEach((header, index) => {
  header.setAttribute('title', countryContinent[index].continent);
});

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