react-chartjs-2环形图大量类别时图例被截断的解决方法

针对120个类别图例被截断的情况，给你几个实用的解决办法：

1. 给图例添加滚动容器 #

把图例放到带垂直滚动的容器中，所有图例项可通过滚动查看，避免被截断。

代码修改示例： #

class YourChartComponent extends React.Component {
  legendRef = React.createRef();

  render() {
    return (
      <div className="col e aC" style={{ padding: '0.5rem', display: 'flex', gap: '1rem' }}>
        <div size="350px">
          <Typography variant="subtitle1" color="textSecondary">{this.props.title}</Typography>
          <Doughnut 
            data={this.props.data} 
            options={{ 
              responsive: true, 
              plugins: { 
                legend: { 
                  display: true, 
                  position: this.props.legendPosition || 'right',
                  // 指定图例渲染到自定义容器
                  container: this.legendRef.current
                } 
              } 
            }} 
          />
        </div>
        {/* 带垂直滚动的图例容器 */}
        <div 
          ref={this.legendRef} 
          style={{ 
            maxHeight: '350px', 
            overflowY: 'auto',
            paddingRight: '0.5rem'
          }} 
        />
      </div>
    );
  }
}

2. 优化图例项布局，压缩空间 #

通过缩小字体、减少内边距、开启标签换行，让单个图例项占用更少空间，尽可能在有限区域内显示更多内容：

代码修改示例： #

<Doughnut 
  data={this.props.data} 
  options={{ 
    responsive: true, 
    plugins: { 
      legend: { 
        display: true, 
        position: this.props.legendPosition || 'right',
        labels: {
          // 开启标签自动换行
          wrap: true,
          // 缩小字体尺寸
          font: { size: 10 },
          // 减少图例项间的内边距
          padding: 5,
          // 限制标签最大宽度，超出自动换行
          maxWidth: 120
        }
      } 
    } 
  }} 
/>

3. 调整图例位置为底部并启用横向滚动 #

如果右侧空间不足，可将图例移到底部，搭配横向滚动查看：

代码修改示例： #

<div className="col e aC" style={{ padding: '0.5rem' }}>
  <div size="350px">
    <Typography variant="subtitle1" color="textSecondary">{this.props.title}</Typography>
    <Doughnut 
      data={this.props.data} 
      options={{ 
        responsive: true, 
        plugins: { 
          legend: { 
            display: true, 
            position: 'bottom',
            // 设置图例横向排列
            direction: 'row',
            // 开启自动换行
            wrap: true,
            labels: {
              font: { size: 10 },
              padding: 3
            }
          } 
        } 
      }} 
    />
  </div>
  {/* 给底部图例容器添加横向滚动 */}
  <div style={{ overflowX: 'auto', marginTop: '0.5rem' }}></div>
</div>

内容的提问来源于stack exchange，提问作者Flavio Luis de Mello