IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Bibliothèques & Frameworks Discussion :

Plusieurs graphes sur la même page [Chart.js]


Sujet :

Bibliothèques & Frameworks

  1. #21
    Expert confirmé Avatar de psychadelic
    Profil pro
    Inscrit en
    Mai 2010
    Messages
    2 529
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2010
    Messages : 2 529
    Points : 4 739
    Points
    4 739
    Par défaut
    Citation Envoyé par Watilin Voir le message
    C’est un problème d’ordre dans le chargement des différents scripts. ?
    non, non, c'est bien dans les 3 erreurs que j'ai indiqué...
    allez, je donne un indice : ],}
    «La pluralité des voix n'est pas une preuve, pour les vérités malaisées à découvrir, tant il est bien plus vraisemblable qu'un homme seul les ait rencontrées que tout un peuple.» [ René Descartes ] - Discours de la méthode

  2. #22
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    16 939
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 939
    Points : 44 112
    Points
    44 112
    Par défaut
    non, non, ...
    Si Si (impératrice)

    Plusieurs raisons potentielles de voir apparaître cette erreur dont
    • L'objet Chart est redéfini via un Chart = {}, comme suggéré par Watilin, mais même si c'est maladroit d'utiliser chart pour affecter un objet Chart, le doute a été levé.
    • Le fichier chart.js n'est pas chargé

    je donne un indice : ],}
    La dernière virgule, même si inutile, n'entraine plus d'erreur, au moins depuis IE8 si ma mémoire est bonne, au pire le dernier élément de l'objet crée est affecté comme null:null et donc non pris en compte.
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    var obj = {
      "un" : 1,
      "deux" : 2,
    }
    console.log( JSON.stringify(obj))
    sera vu comme
    {"un":1,"deux":2}
    Pour finir, on peut relever pas mal de maladresse dans son code mais celui ci est tout à fait fonctionnel.

  3. #23
    Nouveau Candidat au Club
    Homme Profil pro
    Étudiant
    Inscrit en
    Novembre 2016
    Messages
    19
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 29
    Localisation : France, Hauts de Seine (Île de France)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Novembre 2016
    Messages : 19
    Points : 1
    Points
    1
    Par défaut
    Alors pour lever toutes ambiguïtés, ce code fonctionnait dans le cas de l'affichage d'un seul graphique en suivant la documentation de Chart.js

    Normalement le graphique est sensé etre codé comme ci-dessous :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
     
    <canvas id="myChart" width="400" height="400"></canvas>
    <script>
    var ctx = document.getElementById("myChart");
    var myChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
            datasets: [{
                label: '# of Votes',
                data: [12, 19, 3, 5, 2, 3],
                backgroundColor: [
                    'rgba(255, 99, 132, 0.2)',
                    'rgba(54, 162, 235, 0.2)',
                    'rgba(255, 206, 86, 0.2)',
                    'rgba(75, 192, 192, 0.2)',
                    'rgba(153, 102, 255, 0.2)',
                    'rgba(255, 159, 64, 0.2)'
                ],
                borderColor: [
                    'rgba(255,99,132,1)',
                    'rgba(54, 162, 235, 1)',
                    'rgba(255, 206, 86, 1)',
                    'rgba(75, 192, 192, 1)',
                    'rgba(153, 102, 255, 1)',
                    'rgba(255, 159, 64, 1)'
                ],
                borderWidth: 1
            }]
        },
        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero:true
                    }
                }]
            }
        }
    });
    </script>
    J'ai juste adapté le code pour pouvoir créer un nombre indéfini de graphique.

    Dans ma page statistique de mon site j'avais auparavant 1 seul section, donc besoin que d'un graphique mais il s'avère qu'aujourd'hui je peux supprimer/ajouter des sections et donc des graphiques. Mais comme l'ajout est dynamique je ne pouvais me permettre de créer/supprimer à la main un graphique, j'ai donc cherché le moyen de dynamiser la création des variables ctx, j'ai donc utiliser un tableau. D'après vos précédentes remarques il semblerait que les objets soit des outils plus adapté. Mais visiblement ça ne fonctionne pas. Peut être que chartjs n'accepte pas les objets en paramètre mais les variables et les tableaux sont aussi des objets je ne vois donc pas pourquoi cela ne fonctionnerai pas, d'où le besoin de votre aide

  4. #24
    Nouveau Candidat au Club
    Homme Profil pro
    Étudiant
    Inscrit en
    Novembre 2016
    Messages
    19
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 29
    Localisation : France, Hauts de Seine (Île de France)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Novembre 2016
    Messages : 19
    Points : 1
    Points
    1
    Par défaut
    Citation Envoyé par Watilin Voir le message
    C’est un problème d’ordre dans le chargement des différents scripts. Vérifie que le script Charts est chargé avant ton propre script. Y a-t-il des attributs async ou defer ?
    Non Watilin je n'est pas de async ou defer

  5. #25
    Nouveau Candidat au Club
    Homme Profil pro
    Étudiant
    Inscrit en
    Novembre 2016
    Messages
    19
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 29
    Localisation : France, Hauts de Seine (Île de France)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Novembre 2016
    Messages : 19
    Points : 1
    Points
    1
    Par défaut
    Bon du coup,

    grâce à vos conseils je me suis aperçu que mon site ne chargé plus le script chart.js depuis internet je l'ai donc téléchargé et ajouter une balise src.

    l'erreur à maintenant changé il met :

    Nom : chart.png
Affichages : 1593
Taille : 1,9 Ko

    mais là il devient compliqué de debug, le fichier chart.min.js étant completement ilisible, tout est sur 1 seul ligne

  6. #26
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    16 939
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 939
    Points : 44 112
    Points
    44 112
    Par défaut
    Lors de la phase de mise au point je déconseille de faire référence au fichier minifier justement pour ce manque de lisibilité.

    Remplace dans ce cas https://cdnjs.cloudflare.com/ajax/li...2/Chart.min.js par https://cdnjs.cloudflare.com/ajax/li...2.7.2/Chart.js.

    L'erreur apparaîtra un peu plus clairement, apparaît lecture de la source, comme quoi un de tes chart[name] = document.getElementById("myAreaChart" + j) est non défini.

  7. #27
    Nouveau Candidat au Club
    Homme Profil pro
    Étudiant
    Inscrit en
    Novembre 2016
    Messages
    19
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 29
    Localisation : France, Hauts de Seine (Île de France)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Novembre 2016
    Messages : 19
    Points : 1
    Points
    1
    Par défaut
    Effectivement je pensais avoir enlevé tout les chart.min mais il en restait un que je n'avais pas vu.

    l'erreur ce trouverais ici :

    Nom : errchart.PNG
Affichages : 1603
Taille : 6,0 Ko

    peut être remplacer mon objet par un tableau ?

  8. #28
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    16 939
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 939
    Points : 44 112
    Points
    44 112
    Par défaut
    Je t'ai indiqué l'erreur
    ...comme quoi un de tes chart[name] = document.getElementById("myAreaChart" + j) est non défini.

  9. #29
    Nouveau Candidat au Club
    Homme Profil pro
    Étudiant
    Inscrit en
    Novembre 2016
    Messages
    19
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 29
    Localisation : France, Hauts de Seine (Île de France)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Novembre 2016
    Messages : 19
    Points : 1
    Points
    1
    Par défaut
    Effectivement je bouclé une fois de trop, je n'est plus d'erreur par contre rien ne s'affiche mais là ça doit etre un problème de html. je règle ça et je reviens vers vous pour vous dire ce qu'il en est.

    Merci

  10. #30
    Nouveau Candidat au Club
    Homme Profil pro
    Étudiant
    Inscrit en
    Novembre 2016
    Messages
    19
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 29
    Localisation : France, Hauts de Seine (Île de France)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Novembre 2016
    Messages : 19
    Points : 1
    Points
    1
    Par défaut
    j'ai donc réglé les problèmes de boucles et de html et tout fonctionne merci

+ Répondre à la discussion
Cette discussion est résolue.
Page 2 sur 2 PremièrePremière 12

Discussions similaires

  1. [JpGraph] JpGraph plusieurs graphes sur une même page
    Par mao-40 dans le forum Bibliothèques et frameworks
    Réponses: 2
    Dernier message: 03/04/2013, 01h50
  2. [JpGraph] Plusieurs graphes sur une même page
    Par Dam1en dans le forum Bibliothèques et frameworks
    Réponses: 2
    Dernier message: 29/12/2007, 00h13
  3. Réponses: 2
    Dernier message: 18/07/2007, 09h38
  4. [JpGraph] Placer deux graphes sur une même page
    Par am.adnane dans le forum Bibliothèques et frameworks
    Réponses: 2
    Dernier message: 12/05/2007, 02h04
  5. [C#][SVG] Combinaison de plusieurs graphe sur une même page
    Par doudoustephane dans le forum ASP.NET
    Réponses: 2
    Dernier message: 22/11/2006, 10h19

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo