如何固定Chart.js图例标签盒宽度 实现上下两个Doughnut环形图对齐

根因分析 #

两个Doughnut环形图上下不对齐是因为Chart.js内置图例区域默认宽度随标签长度自适应，右侧图例宽度变化时会挤压左侧图表绘制区域，最终导致环形图中心位置偏移。你之前设置的boxWidth参数实际是图例前标识色块的宽度，并非标签区域宽度，所以调整无效。

解决方案 #

方案1：自定义插件强制固定图例宽度 #

通过Chart.js插件钩子强制设置图例区域固定宽度，避免自适应变化，修改配置如下：

export const DEFAULT_DOUGHNUT_OPTIONS = {
  maintainAspectRatio: false,
  aspectRatio: 1,
  resizeDelay: 1000,
  animation: {
    duration: 0,
  },
  plugins: {
    legend: {
      labels: {
        generateLabels: (chart: any) => {
          const { data } = chart;
          return generateLabels(data);
        },
        color: darkMainTextColor,
        font: {
          size: 14,
          family: fontFamily,
        },
        usePointStyle: true,
        boxWidth: 16, // 调整为合理的色块宽度
        padding: 10,
      },
      position: 'right',
      rtl: true
    },
    // 新增自定义插件固定图例宽度
    customFixedLegend: {
      beforeLayout: (chart) => {
        const legend = chart.legend;
        if (legend) {
          // 可根据实际需求调整固定宽度值
          const fixedLegendWidth = 180;
          legend.minWidth = fixedLegendWidth;
          legend.maxWidth = fixedLegendWidth;
          legend.width = fixedLegendWidth;
        }
      }
    }
  },
  borderWidth: 1,
  cutout: '80%',
};

方案2：统一截断图例标签长度 #

在自定义生成标签的逻辑中统一处理文本长度，超过阈值自动加省略号，避免标签过长撑宽图例：

generateLabels: (chart: any) => {
  const { data } = chart;
  const originLabels = generateLabels(data);
  // 超过14个字符自动截断，可根据需求调整长度
  return originLabels.map(labelItem => ({
    ...labelItem,
    text: labelItem.text.length > 14 ? `${labelItem.text.slice(0, 14)}...` : labelItem.text
  }))
},

方案3：使用外部自定义图例 #

关闭Chart.js内置图例，自己用HTML+CSS实现右侧图例，通过CSS固定图例区域宽度，即可100%保证两个图表的对齐效果：

1. 配置中关闭内置图例：

plugins: {
  legend: {
    display: false
  }
}

2. 页面中自行编写DOM结构渲染图例，绑定对应数据项的显隐交互即可。

内容的提问来源于stack exchange，提问作者אור ברמן