web-dev-qa-db-ja.com

リチャートチャートのカスタム凡例ラベル

私の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}

シリーズレベルを説明ラベルにマッピングする必要があります。

凡例でcontentを見てきました： http://recharts.org/#/en-US/api/Legend 、しかしそれはレジェンドコンポーネントを完全に書き直すことにもっと関心があるようです。

recharts
14
Oliver Watkins

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

デフォルトでは、凡例のコンテンツは線、棒、面などの名前で生成されます。名前が設定されていない場合、dataKeyを使用して凡例のコンテンツが生成されます。

20
JonT

これを<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

4
ghghjk