Partage
  • Partager sur Facebook
  • Partager sur Twitter

Angular / Graphique

tableau modifiable directement

Sujet résolu
    31 juillet 2020 à 10:01:03

    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?

    D'avance merci.

    • Partager sur Facebook
    • Partager sur Twitter
      1 août 2020 à 21:52:39

      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.

      • Partager sur Facebook
      • Partager sur Twitter

      suggestion de présentation.

        6 août 2020 à 11:18:55

        Hello SamuelGaborieau3,

        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.

        • Partager sur Facebook
        • Partager sur Twitter

        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.
        • Editeur
        • Markdown