ChartJS v3图例居右时画布上下出现多余内边距如何解决

安全阿岳

2026-9-1

解决ChartJS v3环形图图例居右时上下冗余空白问题

问题现象

ChartJS v2版本中，环形图设置图例居右时，canvas高度会自动适配内容所需最小空间，画布上下无额外内边距：
升级到v3版本后，无论图例在顶部还是居右，canvas高度默认固定，图例居右时图表上下会出现大量冗余空白：

实现方案

v3版本重构了布局引擎，默认不会根据侧边图例自动调整纵向布局空间，官方没有提供直接的配置项关闭该留白，可以通过以下两种方式实现v2版本的适配效果：

动态调整canvas高度
首先关闭默认的宽高比锁定（将maintainAspectRatio设为false），在图表每次渲染完成后，根据实际图表区域的尺寸动态设置canvas高度，核心配置如下：

new Chart(document.getElementById('yourChart'), {
  type: 'doughnut',
  data: yourChartData,
  options: {
    responsive: true,
    maintainAspectRatio: false,
    plugins: {
      legend: { position: 'right' }
    }
  },
  plugins: [{
    id: 'adjustHeight',
    afterRender: (chart) => {
      const contentHeight = chart.chartArea.bottom - chart.chartArea.top;
      // 预留10px上下边距避免内容贴边
      const targetHeight = contentHeight + 20;
      if (chart.canvas.height !== targetHeight) {
        chart.canvas.height = targetHeight;
        chart.resize();
      }
    }
  }]
})

自定义插件覆写布局边距
编写轻量自定义插件，在布局计算阶段直接把上下padding强制设为0，仅在图例居左/居右时生效：

const fixPaddingPlugin = {
  id: 'fixVerticalPadding',
  beforeLayout: (chart) => {
    const legendPos = chart.options.plugins.legend.position;
    if (legendPos === 'left' || legendPos === 'right') {
      chart.padding.top = 0;
      chart.padding.bottom = 0;
    }
  }
}
// 全局注册即可对所有图表生效，也可以在单个图表配置中注册使用
Chart.register(fixPaddingPlugin);