使用react-chartjs-2绘制饼图时图例居右报错的解决方法

核心原因 #

报错本质是Chart.js在处理左右布局的图例时，会尝试对图例项的文本执行reduce操作（用于计算换行宽度），但当前图例项的text不是数组类型（而是单个字符串或其他非可迭代值），导致调用reduce失败。顶部/底部布局时不会触发这个文本换行计算逻辑，所以没有报错。

具体解决步骤 #

1. 修正图例标签的返回格式 #

如果使用了自定义的generateLabels函数，确保每个图例项的text属性是数组类型，哪怕是单个文本也用数组包裹：

const options = {
  plugins: {
    legend: {
      position: 'left',
      labels: {
        generateLabels: (chart) => {
          return chart.data.labels.map((label, idx) => ({
            text: [label], // 关键：将单个文本转为数组
            fillStyle: chart.data.datasets[0].backgroundColor[idx],
            strokeStyle: chart.data.datasets[0].borderColor[idx],
            lineWidth: chart.data.datasets[0].borderWidth,
            hidden: !chart.data.datasets[0].data[idx],
            index: idx
          }));
        }
      }
    }
  }
};

2. 排查全局配置或插件干扰 #

如果项目中配置了Chart.js全局插件，或者修改了默认图例行为，检查是否有代码将图例文本强制转为字符串。比如全局注册的插件可能覆盖了默认的文本处理逻辑，导致左右布局时无法获取数组类型的文本。

3. 验证基础数据格式 #

确保你的data.labels是标准的字符串数组，没有混入非字符串或非数组的异常值。统一格式示例：

const data = {
  labels: ['项目A', '项目B', '项目C'], // 确保所有标签都是字符串
  datasets: [
    {
      data: [30, 50, 20],
      backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56']
    }
  ]
};

4. 版本适配小调整 #

如果上述步骤无效，可以尝试微调版本：

• 将react-chartjs-2升级到^5.2.1（修复了部分图例布局的隐性bug）
• 确保chart.js和react-chartjs-2的版本匹配（官方推荐react-chartjs-2@5.x对应chart.js@4.x，你的版本整体兼容，但小版本升级可能解决细节问题）

内容的提问来源于stack exchange，提问作者David Dewasmes