使用Chart.js 2.9.4生成柱状图时左上角出现异常遮挡问题求助

问题复现参考 #

问题核心原因 #

该遮挡是Chart.js 2.9.4版本默认配置适配不足导致的：既没有给Canvas元素设置正确的容器尺寸约束，也没有显式配置图表的布局边距、图例位置，最终导致左上角的图例元素超出绘图区域边界，和坐标轴区域重叠产生异常遮挡。

分步修正方案 #

• 调整DOM结构，给Canvas增加尺寸约束容器
  不要直接给<canvas>元素设置宽高，用固定高度的父容器包裹，避免Canvas自适应计算时出现尺寸偏移：

  <div style="height: 400px; width: 100%;">
    <canvas id="myChart"></canvas>
  </div>
  

• 补全图表初始化的options配置
  关闭Chart.js默认的宽高比锁定，给布局留足内边距，固定图例位置，修正后的完整初始化代码如下：

  var ctx = document.getElementById('myChart').getContext('2d');
  var myChart = new Chart(ctx, {
      type: 'bar',
      data: {
          labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
          datasets: [{
              label: '# of Votes',
              data: [12, 19, 3, 5, 2, 3],
              borderWidth: 1
          }]
      },
      options: {
          responsive: true,
          maintainAspectRatio: false,
          layout: {
              padding: {
                  top: 10,
                  left: 10,
                  right: 10,
                  bottom: 10
              }
          },
          legend: {
              position: 'top'
          }
      }
  });
  

• 排查自定义CSS冲突
  检查是否给Canvas元素写了自定义样式，确保没有给元素设置负边距、绝对定位偏移等规则，这类规则会导致Canvas内部绘制坐标和CSS显示坐标错位，也会出现异常遮挡。

验证效果 #

调整完成后重新渲染图表，左上角的图例将正常放置在顶部边距区域，不会和柱状图的坐标轴、绘图区域产生重叠遮挡。

内容的提问来源于stack exchange，提问作者Emil C.