HTML仪表盘怎样做图例说明？标签注释添加-html教程-PHP中文网

figcaption是仪表盘图表图例的语义正确方案，必须嵌套在figure内作为首/末子元素，用于说明图表用途与上下文；caption仅适用于table，注释标签完全不可见，不可用作图例。

html仪表盘怎样做图例说明？标签注释添加

figcaption 是给仪表盘图表加图例说明的语义正确方案，caption 不适用，注释标签完全不可见、不参与渲染，不能当图例用。

图表图例必须用 `figcaption`，不是 `caption`

caption 只能属于

，且只能描述整张表；仪表盘里的  或  不是表格，硬套 caption 会失效——浏览器不识别、读屏器跳过、CSS 样式（如 caption-side）无效。正确做法是把图表和说明一起包进 
，再用  做图例：


 必须是  的首个或末个子元素，中间不能插  或其他标签
文字要说明“为什么这张图在这里”，比如 CPU 使用率（5分钟滚动平均值），而不是只写“CPU 图”
若图表有多个数据系列（如温度+湿度双曲线），figcaption 可配合  列出图例项，但需确保整个  在  内部


 注释标签不能当图例用
HTML 注释  在源码里可见，但浏览器完全不渲染，用户永远看不到。它只对开发者有用，比如标记某段 JS 是轮询逻辑，或备注 API 路径变更。
常见误用：

在  —— 注释被忽略，图例没显示
把注释放在 

 —— 依然不可见，且破坏语义结构

如果真想隐藏图例（比如仅给辅助技术用），该用 aria-label 或 aria-labelledby，而不是注释。

											
												
												
													使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审
													使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。
												
												下载
												
											
										
Canvas/SVG 图表的图例要手动同步数值
用 
 结构时，figcaption 文字不会自动随数据更新。比如 CPU 值从 42% 变到 87%，你得用 JS 同步改 figcaption.textContent：
const figcap = document.querySelector('figure#cpu-fig figcaption');
const cpuValue = 87;
figcap.textContent = `CPU 使用率：${cpuValue}%（当前峰值）`;
容易漏的点：

没加单位或时间上下文（如缺 “%” 或 “实时”），导致语义模糊
在 requestAnimationFrame 循环里反复设置 textContent 却没做防抖，引发无谓重排
WebSocket 推送新值时，只更新了 canvas 绘制，忘了刷新 figcaption，图例和图形脱节

复杂图例建议拆成独立 DOM 元素而非塞进 figcaption

当图例需要交互（如点击切换数据系列）、带颜色块、或含 HTML（如图标 + 文字），figcaption 就不够用了——它只接受流内容，不支持内联样式或事件绑定。
替代方案：
在  外另起一个 ，用 CSS 定位紧贴图表下方
每个图例项用 

用 JS 控制点击后 canvas 重绘，并同步更新 aria-live 区域供读屏器感知
这时候 figcaption 可降级为总标题（如 “机房环境监控”），具体项交给独立图例容器管——分工清晰，可维护性高。