如何在PieChart中配置显示分类名称的图例？

要让图例显示各颜色对应的分类名称（也就是你JSON数据里的choice字段），只需要给Pie组件加上nameKey="choice"，或者给Legend组件配置对应的数据字段即可，下面是修改后的完整代码：

// 假设你定义了COLORS数组，比如：
const COLORS = ['#0088FE', '#00C49F', '#FFBB28', '#FF8042', '#8884d8'];

const renderCustomizedLabel = ({ name, value }) => {
  return `${name}: ${value}`; // 可根据需求自定义饼图上的标签内容
};

// 渲染PieChart的代码
<ResponsiveContainer width="100%" height={400}>
  <PieChart>
    <Pie
      data={data}
      cx="50%"
      cy="50%"
      labelLine={false}
      label={renderCustomizedLabel}
      outerRadius={150}
      fill="#8884d8"
      dataKey="count"
      nameKey="choice" // 关键：指定用choice字段作为图例的名称
    >
      {data.map((entry, index) => (
        <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
      ))}
    </Pie>
    <Legend verticalAlign="bottom" />
  </PieChart>
</ResponsiveContainer>

补充方案（单独配置Legend） #

如果不想修改Pie组件，也可以直接给Legend组件绑定数据并指定字段：

<Legend 
  verticalAlign="bottom" 
  data={data} 
  dataKey="choice"
  formatter={(value, entry, index) => (
    <span style={{ color: COLORS[index % COLORS.length] }}>{value}</span>
  )}
/>

两种方式都能让图例正确匹配颜色和对应的分类名称。

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