Dev Faq
0
votes

Comment passer des couleurs de remplissage pour rechart la composante tarte

Donc, fondamentalement, j'ai ce tableau d'objets: xxx pré>

Je veux en faire la boucle et accéder à la propriété couleur code>. Donc, fondamentalement, j'ai un graphique et chaque partie aura sa propre couleur, donc je souhaite boucler à l'intérieur de l'objet tout en attribuant également la valeur pour attribuer la couleur à celle-ci. P>

exemple: P> 

{testMeasurments.map(s=>
        <Pie 
        dataKey="value" 
        isAnimationActive={false} 
        data={s.data} 
        cx={200} 
        cy={200} 
        outerRadius={100} 
        innerRadius={60}
    fill={s.color} // Here I want to loop over each color and assign it to the proper value
  >

4 commentaires

Comment réussissez-vous les tests-test?

Qu'est-ce que accessoires et apps.data ?

@OYME désolé pour le gênance s'il vous plaît se référer au code fixe

@Redbaron désolé pour le gênance s'il vous plaît se référer au code fixe

3 Réponses :

0
votes

Essayez quelque chose comme ceci: 

testMeasurments.map((tm) => {
   return tm.data.map((data) => {
       <Pie 
         dataKey="value" 
         isAnimationActive={false} 
         data={data.data} 
         cx={200} 
         cy={200} 
         outerRadius={100} 
         innerRadius={60}
         fill={data.color}
   })
}

4 commentaires

data.data fait référence à une propriété non existante. Seul TM a attribut .

yeh je n'étais pas sûr de ce que cela a été laissé comme ça, assurez-vous que l'OP pourrait résoudre ce problème si nécessaire

De cette façon, votre solution créera un graphique à secteurs pour chaque point de données au lieu de montrer le jeu de données sur un seul. Je ne pense pas que ce soit ce que l'OP voulait réaliser.

yeh je pense que le vôtre est correct mais OQ était légèrement déroutant

0
votes

regarder le Exemple de code pour le composant PIE A>, vous devez renommer la propriété couleur code> sur remplir code> dans votre jeu de données, puis il fonctionnera automatiquement. La propriété remplir code> dans le composant code> Pie code> est pour la couleur de remplissage au niveau du composant. 

const testMeasurments = [
  {
    data: [
      {name: "glucose", value: 6, fill: '#57c0e8'},
      {name: "SpO2", value: 5, fill: "#FF6565"},
      {name: "Blood Pressure", value: 4, fill: "#FFDA83"},
      {name: "Body Weight", value: 2, fill: "purple"}
    ]
  }
]

/// ...

{testMeasurments.map(s=>
        <Pie 
        dataKey="value" 
        isAnimationActive={false} 
        data={s.data} 
        cx={200} 
        cy={200} 
        outerRadius={100} 
        innerRadius={60}
        fill="#fff"
  >

4 commentaires

waw je ne savais pas ça! merci beaucoup ça a fonctionné parfaitement

Je ne comprends pas comment cela fonctionne? Comme le remplir sera #fff à chaque fois le pas? Mais je pensais que l'Op voulait que ce soit la valeur de la propriété couleur?

@Redbaron parce que l'OP a essayé de définir la mauvaise propriété. Mais il souhaitait définir les couleurs de remplissage pour les points de données individuels, pas pour l'ensemble du composant Tableau Pie.

@ ViaM0ZAH Je suis désolé je ne l'ai pas accepté plus tôt, mais ce jour-là, ils m'ont dit que vous ne pouvez pas accepter la réponse tout de suite, alors j'ai oublié de le faire plus tard, désolé! Encore merci pour votre réponse

0
votes

Si vous passez testmesurements code> en tant que PROP, alors vous devez prendre le premier élément du tableau CODE> TESTMEEFEURS, puis vous pouvez accéder aux données Code> Array, puis vous pouvez faire boucler comme celui-ci - 

{
    this.props.testMeasurements[0].map(dataSet => (
        <Pie
         dataKey="value" 
         isAnimationActive={false} 
         data={dataSet.data} 
         cx={200} 
         cy={200} 
         outerRadius={100} 
         innerRadius={60}
         fill={dataSet.color}
        />
    ))
}

1 commentaires

Je crois que TestmesEsurthments contiendra plus d'une mesure si codant dur pour le premier élément ne semble pas une solution générique. De plus, dans votre solution, DataSet n'a pas de données propriété.

Articles qui pourrait vous intéresser :

Mon application create-react ne parvient pas à se compiler en raison d'une erreur ESLint
Erreur: Node Sass version 5.0.0 est incompatible avec ^ 4.0.0
La réinitialisation de React-hook-form fonctionne correctement, les champs de saisie ne se vident toujours pas après l'envoi
Changer le format numérique du champ d'entrée dans le mode d'édition de ligne de table d'Antd?