web-dev-qa-db-fra.com

Affichage des données JSON dans Chartjs

J'essaie d'utiliser Chart JS pour créer une table avec des points de données générés dynamiquement à partir de mon fichier JSON. La logique de mon code ressemble à ceci:

var datapart;
for (i = 0; i < jsonfile.jsonarray.length; i++){
     datapart += {
          label: jsonfile.jsonarray[i].name,
          data: [jsonfile.jsonarray[i].age] 
     };
}

var config = {
   type: 'line',
   data: {
      labels: ["Graph Line"],
      datasets: [datapart]
   }
}

Mon fichier JSON quant à lui ressemble à ceci: 

{
"jsonarray": [
    {
      "name": "Joe",
      "age": 12
    },
    {
      "name": "Tom",
      "age": 14
    }
]
}

La variable config contient les paramètres de configuration de ChartJS, y compris la définition de points de données. Lorsque chargé dans ChartJS, config fournit les informations nécessaires à l'affichage de mon graphique. 

Quoi qu'il en soit, ma pensée était d'utiliser la variable datapart comme moyen d'ajouter les jeux de données à l'aide de ma boucle for. Malheureusement, le code ne produit aucun résultat. Je comprends que ma méthode d’ajout de variables est défectueuse, mais je ne sais pas comment procéder. 

Comment puis-je ajouter ces valeurs JSON à Chart.js?

javascriptjsonchart.js
8
Jason Chen

Votre approche pour la construction du graphique est totalement inappropriée. Voici la bonne façon, que vous devriez suivre:

var jsonfile = {
   "jsonarray": [{
      "name": "Joe",
      "age": 12
   }, {
      "name": "Tom",
      "age": 14
   }]
};

var labels = jsonfile.jsonarray.map(function(e) {
   return e.name;
});
var data = jsonfile.jsonarray.map(function(e) {
   return e.age;
});;

var ctx = canvas.getContext('2d');
var config = {
   type: 'line',
   data: {
      labels: labels,
      datasets: [{
         label: 'Graph Line',
         data: data,
         backgroundColor: 'rgba(0, 119, 204, 0.3)'
      }]
   }
};

var chart = new Chart(ctx, config);
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas id="canvas"></canvas>

22
ɢʀᴜɴᴛ

J'ai trouvé la solution proposée par Bear GRiZZLY XI très utile. Utilise la boucle for ...

Supposons que vous ayez une réponse json de votre api comme suit:

var markschart = document.getElementbyId("markschart");

{
    "labels": "Maths,Geography,Physics,Chemistry,English,Biology,Music",
    "datasets": [
        {
            "label": "Student 3",
            "data": "120, 90, 45, 90, 14, 100, 88",
            "spanGaps": false
        },
        {
            "label": "Student 2",
            "data": "150, 80, 99, 100, 90, 110, 97",
            "spanGaps": false
        },
        {
            "label": "Student 1",
            "data": "140, 100, 89, 134, 120, 78, 56",
            "spanGaps": false
        }
    ]
}

en javascript, vous pouvez gérer la réponse comme suit (la réponse contient le paquet json ci-dessus):

var mydatasets = [];
var colorslist = ["blue","orange","Magenta","green","syrup","navy","bumblebee","turkish","army","ferrari"];

for(var j = 0; j < response.datasets.length; j++) {
  mydatasets.Push({label: response.datasets[j].label, boderColor: colorslist[j], data: response.datasets[j].data.splits(','), spanGraphs: true});
}
var subjectsData = {
  labels: response.labels.split(','),
  datasets: mydatasets
}

var options = {
  scales: { 
   yAxes: [{
      ticks: {
             beginAtZero: true
           },
      scaleLabel: {
             display: true,
             labelString: 'Subject Perfomance',
             fontSize: 14
           }
  }]
 }
};

var studentsMarksPerformance = new Chart(markschart, {
      type: "line",
      data: subjectsData ,
      options: options
});

Ce qui précède n’est pas une solution complète, mais peut aider à mettre en œuvre une boucle for..each dans la création d’un graphique en courbes à l’aide de Chart.js 

0
Simba