问题:Rechart - 给图表添加标签

我正在尝试学习如何使用 Rechart。文档说您可以在图表元素上放置标签,并举例说明如何使用“名称”作为标签数据键。

我试图在我的图表中这样做,但它不起作用。

如果我从字段中删除“标签”,则不会出现任何标签。如果我保留它,那么显示的唯一标签是饼图楔形上的值。

我有一个带有“名称”数据键的标签(根据文档),但它没有呈现在图表上。

import React, { PureComponent } from 'react';
import {
  ResponsiveContainer, PieChart, Pie, Legend, Label, LabelList
} from 'recharts';

const data = [
  { name: 'Group A', value: 400 }, { name: 'Group B', value: 300 },
  { name: 'Group C', value: 300 }, { name: 'Group D', value: 200 },
];

export default class Example extends PureComponent {
  static jsfiddleUrl = '//jsfiddle.net/alidingling/6okmehja/';

  render() {
    return (
      <div style={{ width: '100%', height: 300 }}>
        <ResponsiveContainer>
          <PieChart>
            <Pie dataKey="value" 
            data={data} 
            fill="#8884d8" 
            Label dataKey="name"    
            />
          </PieChart>
        </ResponsiveContainer>
      </div>
    );
  }
}

如何为饼图添加标签?

解答

对于其他寻找答案的人,这有效:

定义一个函数以您想要的方式呈现标签,例如:

let renderLabel = function(entry) {
    return entry.name;
}

将 label 属性设置为指向您的函数:

<Pie label={renderLabel} [ you other properties ]>
[ your content ]
</Pie>