如何让添加在Canvas图表上的文本显示在前方不被遮挡？

方法一：用DOM元素叠加（最推荐） #

把Canvas和文本放在同一个相对定位的容器里，通过绝对定位让文本悬浮在Canvas上方，确保层级更高：

<div style="position: relative;">
  <canvas id="myChart" width="400" height="300"></canvas>
  <!-- 文本元素，位置和样式按需调整 -->
  <div style="position: absolute; top: 10px; left: 10px; z-index: 10; color: #333; font-size: 16px; font-weight: bold;">总和：1234</div>
</div>

• 容器设为position: relative，让文本的绝对定位以容器为基准
• z-index: 10确保文本层级高于Canvas（默认Canvas的层级为0）
• 可以自由调整文本的字体、颜色、位置，比Canvas绘图更灵活

方法二：调整Canvas绘图顺序（适用于用Canvas API画文本的场景） #

Canvas是按绘制顺序叠加内容的，先画图表，最后画文本，就能让文本显示在最上层：

const ctx = document.getElementById('myChart').getContext('2d');

// 1. 先绘制图表（以Chart.js为例）
const myChart = new Chart(ctx, {
  type: 'bar',
  data: { /* 你的图表数据 */ },
  options: { /* 图表配置 */ }
});

// 2. 等图表渲染完成后再绘制文本
myChart.renderComplete.then(() => {
  ctx.fillStyle = '#2c3e50';
  ctx.font = '18px Arial';
  ctx.fillText('总和：1234', 20, 30); // x坐标20，y坐标30（y是文本基线位置）
});

• 如果用第三方图表库，必须等图表渲染完成再画文本，不然会被图表的重绘覆盖
• 这种方法的文本是画在Canvas内部的，导出Canvas时会包含文本

方法三：修正DOM层级问题 #

如果你的文本元素已经在Canvas之后，但还是被遮挡，检查以下两点：

• 确保文本元素不是position: static（默认值），给它加position: relative或absolute，这样z-index才会生效
• 给文本元素设置比Canvas更高的z-index值，比如z-index: 5

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