Chart.js 4.2.1饼图外部标签被裁剪，如何预留空间完整显示？

针对你使用Chart.js 4.2.1结合chartjs-plugins-datalabels插件时，外部标签被裁剪的问题，可以通过以下几种方法解决：

• 添加布局内边距
  在图表配置中加入layout.padding，给图表四周预留足够空间容纳标签。根据标签的长度调整数值，示例：

  {
    animation: false,
    responsive: true,
    layout: {
      padding: 30 // 四周统一留30px空间，也可单独设置上下左右：padding: { left: 40, right: 40, top: 10, bottom: 10 }
    },
    plugins: {
      title: {
        // 原标题配置...
      },
      datalabels: {
        anchor: 'end',
        align: 'end',
        font: {
          size: 14
        },
        formatter: function (value, context) {
          // 原格式化逻辑...
        }
      },
      legend: {
        display: false
      }
    }
  }
  

• 调整数据标签偏移量
  配合内边距，给datalabels添加offset属性，控制标签与扇区的距离，避免标签过于靠近容器边缘：

  datalabels: {
    anchor: 'end',
    align: 'end',
    font: {
      size: 14
    },
    offset: 20, // 标签与扇区的间距
    formatter: function (value, context) {
      // 原格式化逻辑...
    }
  }
  

• 优化容器样式限制
  当前canvas被设置了固定的363px宽高，若标签较长，这个尺寸可能不足。可以尝试：

  • 移除canvas的固定宽高样式，让其随父容器自适应
  • 给canvas的父容器（.col）设置最小宽高，比如min-width: 400px;，确保有足够空间容纳图表和标签

• 配合maintainAspectRatio调整
  如果需要开启maintainAspectRatio: false，需同时加大布局内边距，并给父容器设置合适的宽高：

  {
    animation: false,
    responsive: true,
    maintainAspectRatio: false,
    layout: {
      padding: 40
    },
    plugins: {
      // 原插件配置...
    }
  }
  

  同时给包含canvas的.col容器添加height: 400px;之类的样式，保证图表有足够的显示空间。

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