23

我的recharts组件有一个非常简单的数据数组：

{name: '12.1.2011', series1: 4000, series2: 2400, series3: 2400},
{name: '12.2.2011', series1: 3000, series2: 1398, series3: 2210},
{name: '12.3.2011', series1: 2000, series2: 9800, series3: 2290}

我想在我的图例中为系列值添加标签。而不是图表显示“series1”、“series2”和“series3”的不同颜色。

当然，我已经可以在 JSON 中设置我想用于我的图例的实际值，但这看起来不正确。例如：

{name: '12.1.2011', 'My nice long descriptive text': 4000, 'Some other text': 2400, 'Some other descriptive text': 2400},
{name: '12.2.2011', 'My nice long descriptive text': 3000, 'Some other text': 1398, 'Some other descriptive text: 2210},
{name: '12.3.2011', 'My nice long descriptive text': 2000, 'Some other text': 9800, 'Some other descriptive text: 2290}

我需要将我的系列级别映射到描述性标签。

我查看了 Legend中的内容： http ://recharts.org/#/en-US/api/Legend ，但这似乎更关心完全重写 Legend 组件。

4

3 回答 3

44

在您的Line, 中Bar添加Area一个name属性。

例子：

<Line name="# Apples" type="monotone" dataKey="series1" stroke="#FF0000" />
<Line name="# Bananas" type="monotone" dataKey="series2" stroke="#FFFF00" />
<Line name="# Grapes" type="monotone" dataKey="series3" stroke="#FF00FF" />

图例会自动选择这个：

http://recharts.org/en-US/api/Legend

默认情况下，legend 的内容由 Line、Bar、Area 等名称生成。当没有设置名称时，将使用 dataKey 交替生成图例内容。

于 2017-08-18T15:28:03.193 回答
10

如果你想让它在 a 上工作，<Pie />你可以覆盖<Legend /> payload. 请看下面的例子；

<Legend
  payload={
    data.map(
      (item, index) => ({
        id: item.name,
        type: "square",
        value: `${item.name} (${item.value}%)`,
        color: colors[index % colors.length]
      })
    )
  }
/>

http://recharts.org/en-US/api/Legend#payload

于 2019-04-15T08:45:22.800 回答
1

对于自定义图例，请使用内容道具，参考：https ://recharts.org/en-US/api/Legend#content

const renderLegend = (props) => {
  const { payload } = props;

  return (
    <ul>
      {
        payload.map((entry, index) => (
          <li key={`item-${index}`}>{entry.value}</li>
        ))
      }
    </ul>
  );
}
<Legend content={renderLegend} />
于 2021-05-30T08:28:47.117 回答