react-chartjs-2饼图outlabels被裁剪 如何自适应调整尺寸完整展示标签

1. 调整全局内边距配置 #

不要仅设置单边顶部留白，需给四边都预留足够空间，可根据标签长度自定义数值：

options: {
  layout: {
    padding: {
      top: 80,
      right: 60,
      bottom: 60,
      left: 60
    }
  }
}

2. 开启自适应参数 #

允许图表根据容器尺寸自动调整，关闭固定宽高比限制：

options: {
  responsive: true,
  maintainAspectRatio: false
}

3. 优化outlabels插件配置 #

调整标签本身的间距、字体等参数，降低溢出概率：

options: {
  plugins: {
    outlabels: {
      display: true,
      padding: 10,
      font: {
        size: 12
      },
      stretch: 15
    }
  }
}

4. 给图表外层容器设置最小高度 #

保证渲染图表的React容器有足够高度容纳全部内容：

import { Pie } from 'react-chartjs-2';

const PieComponent = () => {
  // 图表数据、配置定义
  return (
    <div style={{ minHeight: '400px', width: '100%' }}>
      <Pie data={chartData} options={chartOptions} />
    </div>
  )
}

5. 动态适配方案（适配可变标签长度） #

如果标签长度不固定，可在渲染前遍历所有标签计算最大宽高，动态赋值给layout.padding的对应属性，实现完全自动适配。

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