本文详解如何在 Plotly.js 气泡图中正确配置 hovertemplate，使悬停时显示未归一化的原始尺寸值（如 sizdat 数组中的真实业务数据），而非归一化后的标记大小，同时保留 X/Y 坐标信息。
本文详解如何在 plotly.js 气泡图中正确配置 `hovertemplate`，使悬停时显示未归一化的原始尺寸值（如 `sizdat` 数组中的真实业务数据），而非归一化后的标记大小，同时保留 x/y 坐标信息。
在使用 Plotly.js 构建交互式气泡图时，为保证视觉可读性，通常需对原始尺寸数据（如销售额、用户量等）进行归一化缩放（例如通过 Math.sqrt() 并映射到 [4, 40] 像素范围）。但归一化仅影响图形渲染——悬停提示应始终反映真实业务含义，即原始 sizdat 中的数值，而非 marker.size 的像素值。
关键在于合理组合 text 属性与 hovertemplate：
- 将原始 sizdat 值预先格式化为字符串数组（如 'Size: 16150'），赋给 marker.text；
- 在 hovertemplate 中通过 %{text} 插值引用该内容，而非使用 %{marker.size}（后者返回的是归一化后的像素尺寸）。
以下是修正后的核心代码段（已适配 Flask 前端场景，支持 JSON 动态注入）：
dmap-jsapi-skill
下载
DMap GL地图JSAPI（dmapgl）开发指南。用于编写、审查、调试 DMap 地图 API 代码，涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。
// 假设 xdat, ydat, sizdat 已从 Flask 接口获取（例如 fetch 后解析 JSON）
var xdat = [900, 920, 940, 960, 980, 1000, 1020, 1040, 1060, 1080, 1100];
var ydat = [3, 10, 102, 369, 241, 476, 47, 53, 20, 13, 67];
var sizdat = [16150, 29750, 79050, 79900, 98600, 193800, 23800, 45900, 18700, 8500, 76500];
// 归一化 marker.size（仅用于绘图，不影响 hover）
var sizdatScaled = sizdat.map(v => Math.sqrt(v));
var minS = Math.min(...sizdatScaled), maxS = Math.max(...sizdatScaled);
var sizdatNormalized = sizdatScaled.map(v =>
4 + 36 * ((v - minS) / (maxS - minS || 1)) // 映射到 [4, 40]
);
// ✅ 关键：用原始 sizdat 构建语义化 hover 文本
var hoverText = sizdat.map(v => `Size: ${v.toLocaleString()}`);
var trace = {
x: xdat,
y: ydat,
mode: 'markers',
marker: {
size: sizdatNormalized,
sizemode: 'diameter',
color: '#1f77b4',
opacity: 0.7,
line: { width: 1, color: 'white' },
text: hoverText, // ← 绑定原始值文本
hoverinfo: 'text+x+y' // 显式声明需显示 text/x/y（推荐）
},
// ✅ 核心：用 %{text} 调用原始 sizdat，非 %{marker.size}
hovertemplate:
'<b>X: %{x}</b><br>' +
'<b>Y: %{y}</b><br>' +
'<b>%{text}</b><br>' + // ← 此处显示 "Size: 16,150" 等真实值
'<extra></extra>'
};
Plotly.newPlot('bubble-chart', [trace], {
title: 'Bubble Chart with Original Size Values on Hover',
xaxis: { title: 'X-axis Label' },
yaxis: { title: 'Y-axis Label' }
});
⚠️ 注意事项：
- 避免混用 hoverinfo: 'text' 与 hovertemplate 中的 x/y 字段——建议统一使用 hoverinfo: 'text+x+y' 并在模板中显式调用 %{x} 和 %{y}，确保字段一致性；
- 若需多字段展示（如添加类别名），可扩展 hoverText 数组为对象数组，并配合 customdata + %{customdata[0]} 使用；
- 对大数据集，toLocaleString() 可提升数字可读性，但需注意浏览器兼容性（现代浏览器均支持）；
- Flask 后端返回 JSON 时，确保 sizdat 为纯数字数组，避免字符串类型导致 Math.sqrt() 返回 NaN。
通过此方案，你的气泡图既能保持专业视觉比例，又能在交互中精准传达原始业务指标，真正实现“所见即所得”的数据可视化体验。
