[FIXED] Anzeigen von JSON-Daten in Chartjs

Ausgabe

Ich versuche, Chart JS zu verwenden, um eine Tabelle mit dynamisch generierten Datenpunkten zu erstellen, die aus meiner JSON-Datei stammen. Die Logik meines Codes sieht so aus:

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]
   }
}

Meine JSON-Datei sieht mittlerweile in etwa so aus:

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

Die configVariable enthält die Konfigurationseinstellungen für ChartJS, einschließlich der Einstellung von Datenpunkten. Stellt beim Laden in ChartJS configInformationen bereit, die zum Anzeigen meines Diagramms erforderlich sind.

Wie auch immer, mein Gedanke war, die Variable datapartals Mittel zum Anhängen der Datensätze mit meiner for-Schleife zu verwenden. Leider liefert der Code keine Ergebnisse. Ich verstehe, dass meine Methode zum Anhängen von Variablen fehlerhaft ist, bin mir aber nicht sicher, wie ich vorgehen soll.

Wie kann ich diese JSON-Werte zu Chart.js hinzufügen?

Lösung

Ihr Ansatz zur Erstellung des Diagramms ist völlig unangemessen. Hier ist der richtige Weg, den Sie befolgen sollten:

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>

Beantwortet von – ɢʀᴜɴᴛ

Antwort geprüft von – Cary Denson (FixError Admin)