comment créer un graphique en prenant les entrées de l'utilisateur à partir d'un formulaire dans reactjs
J'ai créé un formulaire et un camembert sans avoir une idée de la façon d'accéder aux données d'un formulaire
chartData:{
datasets:[{
data:[10,20,30,40,50]
}]
}
3 Réponses :
Utilisez le code suivant pour générer un graphique dynamique
import React, { Component } from "react"; import { Pie } from "react-chartjs-2"; export default class App extends Component { state = { dataPie: { datasets: [{ data: [10, 20, 30] }], }, first: "", second: "", } handleSubmit = () => { const { dataPie } = this.state; this.setState({ dataPie: { ...dataPie, datasets: [{ ...dataPie.datasets, data: [ this.state.first, this.state.second ] }] } }) } handleChange = (evt) => { let a = parseInt(evt.target.value) this.setState({ [evt.target.name]: a, }) } render() { const { data, dataPie } = this.state; console.log(dataPie); return ( <React.Fragment> <input type="number" value={this.state.first} name="first" onChange={(evt) => this.handleChange(evt)} /> <input type="number" value={this.state.second} name="second" onChange={(evt) => this.handleChange(evt)} /> <button onClick={() => this.handleSubmit()}>add data to chart</button> <h1>pie chart</h1> <Pie data={dataPie} /> </React.Fragment> ) } }
Je ne veux pas de valeur statique. Dans ce (données: [10,20,30,40,50],) je veux la valeur que j'entre dans les champs de saisie
@Divya J'ai ajouté le code qui met à jour dynamiquement le graphique en utilisant des entrées
Je vous remercie beaucoup pour votre aide. Continuez à nous guider
si ce code vous aide, veuillez l'accepter comme réponse
mais si je veux que le graphique entier ne soit que de 100%. J'ai pris 5 champs de saisie bt je ne veux pas que le total du graphique dépasse 100
en fait il ne dépasse pas 100% à cause de donner les nombres il gère automatiquement les valeurs
si j'ai 5 champs d'entrée. au total des 5 champs la valeur max = 100 un total de 5 champs ne doit pas être plus de 100. s'il dépasse je veux qu'un message d'alerte s'affiche
alors vous devez calculer la valeur dans la méthode handleSubmit si la somme des valeurs est supérieure, puis la renvoyer comme ceci if (sum> 100) {return}
merci mais pourquoi la couleur ne s'applique pas en tranches
les couleurs sont dans un tableau différent, vous devez les gérer également en utilisant l'état défini. Si cette réponse vous aide à l'accepter comme réponse, elle aide également d'autres personnes
maintenant, j'ai un problème, si j'essaie de changer la valeur de 1 champ d'entrée, tout le graphique apparaît sur l'autre graphique, autrement que pour remplacer le graphique ou simplement ajuster cette seule tranche du graphique
`data: [... dataPie.datasets [0] .data, this.state.first, this.state.second]}]` changez ceci en `data: [this.state.first, this.state.second] }] `
Merci beaucoup @ Sanaullah.U m'a donné une très grande solution à mon problème.Merci encore une fois
export default class App extends Component {
state = {
dataPie: {
datasets: [{
data: [10, 20, 30]
}],
},
first: "",
second: "",
}
handleSubmit = () => {
const { dataPie } = this.state;
this.setState({
dataPie: {
...dataPie,
datasets: [{
...dataPie.datasets,
data: [...dataPie.datasets[0].data,
this.state.first, this.state.second]
}]
}
})
}
handleChange = (evt) => {
let a = parseInt(evt.target.value)
this.setState({
[evt.target.name]: a,
})
}
render() {
const { data, dataPie } = this.state;
console.log(dataPie);
return (
<React.Fragment>
<input type="number"
value={this.state.first}
name="first"
onChange={(evt) => this.handleChange(evt)} />
<input type="number"
value={this.state.second}
name="second" onChange={(evt) => this.handleChange(evt)} />
<button onClick={() => this.handleSubmit()}>add data to chart</button>
<h1>pie chart</h1>
<Pie data={dataPie} />
</React.Fragment>
)
}
}
J'ai essayé de faire un diagramme polaire en utilisant ces codes, cela fonctionne correctement avec peu de changements, mais maintenant je veux que les cercles du diagramme polaire soient 10 chacun contenant la valeur 10. L'entrée entrée pour une tranche doit être dans une couleur, le reste doit être d'une autre color.eg: si ma valeur d'entrée de 1 tranche est 100 sur 10, les 90 autres de cette tranche unique devraient être d'une autre couleur, cela devrait être fait pour mes 5 entrées
Je veux quelque chose de similaire à ce lien donné miro.medium.com/max/982/1 * 7q-Pe76n2lvvIfqWmlyiNg.jpeg
comment ajouter deux champs de données à une seule étiquette mais l'un doit rester par défaut 10 et l'autre doit changer en fonction de ma saisie fournie par le champ de saisie
pour une carte polaire utilisant reactjs
data: [... dataPie.datasets [0] .data, this.state.first, this.state.second]}] changez ceci en data: [this.state.first , this.state.second]}]
quelle bibliothèque vous utilisez pour le graphique
react-chartjs-2
J'avais ajouté le code, il fonctionnera pour vous