react-chartjs-2添加offset后如何居中饼图、固定尺寸避免裁切

给饼图数据集配置offset属性后，扇区会沿径向向外偏移指定像素，但Chart.js默认的尺寸计算逻辑不会把这个偏移量纳入预留空间，默认饼图会以最大撑满画布的规则计算半径，最终导致偏移出去的扇区超出画布、被固定尺寸的父容器裁切，同时画布默认的渲染对齐规则也会让偏移后的图形出现视觉上不居中的问题。

按以下3点修改即可实现居中、无裁切的效果：

• 在图表options中增加layout.padding配置，给画布四周预留和offset值相等的内边距，专门容纳偏移出去的扇区内容
• 缩小饼图默认半径，不要让饼图本身撑满整个画布，给偏移留出足够空间
• 给包裹Pie组件的父容器增加flex居中属性，让渲染出来的canvas元素在容器内水平、垂直方向都完全居中

export const data = {
  labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
  datasets: [
    {
      label: "# of Votes",
      data: [13,1],
      backgroundColor: [
        "rgba(235, 159, 12,0.7)",
        "rgba(235, 159, 12, 1)",
      ],
      borderColor: [
        "rgba(235, 159, 12, 0.7)",
        "rgba(235, 159, 12, 1)",
      ],
      borderWidth: 1,
      offset:20
    },
  ],
};

export const options = {
    responsive: true,
    maintainAspectRatio: true,
    // 预留和offset等值的内边距，避免偏移内容贴边裁切
    layout: {
      padding: 20
    },
    plugins: {
      title: {
        display: false,
      },
      legend:{
          display:false
      },
    },
    // 缩小饼图半径，给偏移留出空间，可根据视觉效果微调百分比
    radius: '70%'
  };

function MiniChart() {
  return (
    <div className="flex flex-col w-[150px] lg:w-[200px]">
      <p className="text-center text-md lg:text-lg">Unicorn Startups</p>
      {/* 给容器加flex居中类，保证canvas在容器内完全居中 */}
      <div className="bg-red-100 w-[150px] h-[150px] lg:w-[200px] lg:h-[200px] flex items-center justify-center">
        <Pie data={data} options={options}/>
      </div>
    </div>
  );
}

• 如果调整后仍有轻微裁切，可以把layout.padding的值适当调大2-4px，抵消扇区border宽度带来的额外占位
• radius的百分比值可以根据实际显示效果调整，配置的offset值越大，radius需要设置的越小，保证偏移后整体图形不超出画布范围
• 固定offset值的场景下直接写固定配置即可，如果是动态offset的场景，可以把padding、radius改成根据offset值动态计算的返回值。

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