Question

我的 recharts 组件有一个非常直接的数据数组：

{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中为系列值添加标签。而不是图表显示“series1”，“series2”和“series3”的不同颜色。

当然我可以在JSON中设置我想用于我的传奇的实际值，但这看起来并不合适。例如：

GET /documents?userId={userId}&organizationId={organizationId}

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

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

Answer 1

在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

默认情况下，图例的内容由Line名称生成，栏，区等。如果没有设置名称，将使用dataKey 另外生成图例内容。

Answer 2

如果您希望在<Pie />上使用它，可以覆盖<Legend /> payload。请参见以下示例；

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

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

Answer 3

对于自定义图例，使用内容道具，参考：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} />

我的rechart图表中的自定义图例标签

3 个答案: