web-dev-qa-db-fra.com

Étiquettes de légende personnalisées dans mon tableau de recharge

J'ai un tableau de données assez simple pour mon recharge composant:

{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}

Je voudrais avoir des étiquettes pour les valeurs de série dans ma légende. Au lieu du graphique me montrant les différentes couleurs pour "series1", "series2" et "series3".

Bien sûr, je pouvais déjà définir les valeurs réelles que je veux utiliser pour ma légende dans le JSON, mais cela ne semble pas correct. Par exemple :

{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}

J'ai besoin de mapper mon niveau de série sur une étiquette descriptive.

J'ai regardé le contenu dans Legend: http://recharts.org/#/en-US/api/Legend , mais cela semble plus soucieux de réécrire complètement le composant Legend.

recharts
14
Oliver Watkins

Dans vos Line, Bar et Area ajoutez un attribut name.

Exemple:

<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" />

La légende le reprendra automatiquement:

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

Par défaut, le contenu de la légende est généré par le nom de la ligne, de la barre, de la zone, etc. Lorsqu'aucun nom n'a été défini, dataKey sera utilisé pour générer alternativement le contenu de la légende.

20
JonT

Si vous souhaitez que cela fonctionne sur un <Pie /> vous pouvez remplacer le <Legend />payload. Veuillez voir l'exemple suivant;

<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