Hello, j'ai trouvé ngx-charts qui me permet de représenter des données saisies en dur (écrit directement dans mon xxx.component.ts) mais ne trouve aucun tuto pour que les données soient saisies par l'utilisateur dans une input.
Y'a-t-il un autre outil qui le prévoit? La documentation de ngxcharts est trop vide pour moi (je suis un novice en angular).
Aussi, je veux que ce graph soit modifiable directement depuis le graph et que la veleur soit réflétée dans l'input box. Est-ce possible?
Bonjour, sur un exemple de la doc de ngx-charts j'ai crue comprendre que les différent points du graphique sont passé dans la config du graphique à tracé ( ce qui semble normal ) sinon il ne peut pas s'avoir comment tracé,
"pour que les données soient saisies par l'utilisateur dans une input."
Normalement tu à juste à placé un input ( type number peut être ) sur ton interface utilisateur, écouté l'envoi de donnée en javascript et mettre à jour ton graphique avec les nouvelles valeur entrée.
const configGraph = [
{
"name": "My Super Graph",
"series": []
},
];
// selectionne un formulaire prévu pour la modification du graphique
const form = document.querySelector('#form-graph');
form.addEventListener('submit', e => {
// annule l'envoi des données à la source du form
// pour les traité en javascript uniquement
e.preventDefault();
// récupére la valeur d'un input avec le name 'value-graph'
// situé dans le formulaire
const value = form['value-graph'].value;
configGraph.series.push( {
// name et la clés associé à la valeur du graph
// ici pour simplifié j'ai mis la taille actuel du tableau de valeur
name: configGraph.series.length,
// la valeur entré par l'utilisateur
value: value,
} );
// ici la config du graph et à jour
// tu devrais soit supprimé et re créé le graphique avec la nouvelle config
// soit si il existe une methode: recreate, regenerate où un équivalent à cherchez sur la doc
// https://swimlane.gitbook.io/ngx-charts/
// tu pourrais l'utilisé en luis passant les nouvelles valeur
} );
le code ci dessus et une illustration et ne présente que la modification des données de configuration du graphique, lors d'une action de l'utilisateur,
la librairie présentant plusieurs type de graphique différent si celui que tu intègre à une config différente il attend forcément une liste de clés/valeur pour être tracé le principe reste le même.
merci pour ton aide. Oui, je dois revoir pas mal le JS POO. Je vais regarder dans ce sens.
Ton code a l'air pas mal et m'aide à voir la logique que j'ai zappé.
Encore merci.
Angular / Graphique
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
suggestion de présentation.