ChartJS左侧图例布局问题：如何避免挤压图表？

我之前也踩过这个一模一样的坑！当把图例放在左侧时，ChartJS默认的布局逻辑只会给图例分配横向的固定空间，哪怕图例下方有大把垂直空白，图表也不会自动往下扩展利用这些空间，结果就是图表被硬生生挤到右侧，看起来特别憋屈。

核心原因 #

ChartJS默认会基于图例的横向占用宽度来计算图表的可用区域，而且默认保持图表的宽高比，不会主动去利用图例下方的垂直空间，这就导致了布局浪费。

亲测有效的解决方案 #

要解决这个问题，关键是打破固定宽高比的限制，同时优化图例的布局配置，让图表能充分利用容器的空间：

• 开启响应式并取消固定宽高比：设置responsive: true和maintainAspectRatio: false，这样图表就不会被固定的宽高比束缚，能根据容器的尺寸自由调整。
• 优化图例布局：让图例靠顶部对齐（align: 'start'），同时限制图例的最大宽度、缩小图例方块尺寸，减少横向空间占用。
• 给容器设置固定尺寸：确保ChartJS的canvas容器有明确的宽高，这样布局计算才有依据。

修改后的完整代码示例 #

$(function(){
  // ChartJS 初始化
  var canvas = $('#graph')[0];
  var time = 0.15;
  var projectTime = 0.95;
  
  var config = {
    type: "doughnut",
    responsive: true, // 开启响应式适配容器
    maintainAspectRatio: false, // 取消固定宽高比，允许图表垂直扩展
    data: {
      datasets: [{
        data: [ time, projectTime ],
        backgroundColor: [ "rgb(0, 0, 0)", "rgb(201, 203, 207)" ],
        label: "Dataset 1"
      }],
      labels: ['已用时间', '剩余时间'] // 补全你代码里缺失的标签
    },
    options: {
      layout: {
        padding: {
          left: 10,
          right: 10,
          top: 10,
          bottom: 10
        }
      },
      plugins: {
        legend: {
          position: 'left', // 图例固定在左侧
          align: 'start', // 图例靠顶部对齐，留出下方空间给图表
          maxWidth: 150, // 限制图例最大宽度，避免占用过多横向空间
          labels: {
            boxWidth: 12, // 缩小图例前的方块尺寸，让图例更紧凑
            font: {
              size: 12 // 调整字体大小，进一步节省空间
            }
          }
        }
      }
    }
  };
  
  // 创建图表实例
  new Chart(canvas, config);
});

额外提醒 #

别忘了给你的canvas容器设置明确的宽高样式，比如：

<div style="width: 400px; height: 350px;">
  <canvas id="graph"></canvas>
</div>

这样调整后，图表就会自动利用图例下方的垂直空间，不会再被挤到右侧啦！

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