chart.js ajax drängen auf einen anderen Datensatz immer "undefined"

Question

Folgendes ist mein JavaScript-Code, aber das einzige, was wirklich relevant ist, ist die letzte Funktion. Ich möchte das Diagramm aktualisieren, um ein weiteres Dataset hinzuzufügen, ohne die Seite erneut zu laden. Aus Gründen ist das hinzugefügte Dataset immer undefiniert. Die auskommentierte Zeile, die das exakt gleiche Datenfeld verwendet, funktioniert dagegen. Da ich neu bei Javascript bin, bin ich mir nicht sicher, ob ich etwas Offensichtliches verpasst habe oder ob chart.js diese Art von Sache überhaupt nicht unterstützt.

const CHART = document.getElementById("lineChart"); 
 

 
var dts1 = [ 
 
\t { 
 
\t \t label: "Abfall gesamt", 
 
\t \t data: Abfall_gesamt, 
 
\t } 
 
]; 
 

 
var dts2 = [ 
 
\t { 
 
\t \t label: "Abfall schadstoffhaltiger", 
 
\t \t data: Abfall_schadstoff, 
 
\t } 
 
]; 
 

 
var lineChart = new Chart(CHART, { 
 
\t type: 'line', 
 
    data: { 
 
    \t labels: Jahr, 
 
\t \t datasets: dts1 
 
    } 
 
}); 
 

 
function myFunction(){ 
 
\t //lineChart.data.datasets[0].data = Abfall_schadstoff; 
 
\t lineChart.data.datasets.push(dts2); 
 
\t lineChart.update(); 
 
}

Answer 1

Das Problem ist, können Sie Ihre Datensätze definieren (dts1 und dts2) als Array. Sie sollten ein Objekt, wie so sein ...

var dts1 = { 
    label: "Abfall gesamt", 
    data: Abfall_gesamt, 
}; 
var dts2 = { 
    label: "Abfall schadstoffhaltiger", 
    data: Abfall_schadstoff, 
}; 

und dann, wenn das Diagramm zu erzeugen, setzen datasets Wert als ...

datasets: [dts1] 

---

ᴅᴇᴍᴏ

const CHART = document.getElementById("lineChart"); 
 

 
var Abfall_gesamt = [1, 2, 3]; 
 
var Abfall_schadstoff = [4, 5, 6] 
 

 
var dts1 = { 
 
    label: "Abfall gesamt", 
 
    data: Abfall_gesamt, 
 
    backgroundColor: 'rgba(255, 0, 0, 0.2)' 
 
}; 
 

 
var dts2 = { 
 
    label: "Abfall schadstoffhaltiger", 
 
    data: Abfall_schadstoff, 
 
    backgroundColor: 'rgba(0, 0, 255, 0.2)' 
 
}; 
 

 
var lineChart = new Chart(CHART, { 
 
    type: 'line', 
 
    data: { 
 
     labels: ['Jahr', 'Mahr', 'Kadr'], 
 
     datasets: [dts1] 
 
    }, 
 
    options: { 
 
     responsive: false, 
 
     scales: { 
 
      yAxes: [{ 
 
       ticks: { 
 
        beginAtZero: true, 
 
        stepSize: 1 
 
       } 
 
      }] 
 
     } 
 
    } 
 
}); 
 

 
function myFunction() { 
 
    //lineChart.data.datasets[0].data = Abfall_schadstoff; 
 
    lineChart.data.datasets.push(dts2); 
 
    lineChart.update(); 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script> 
 
<button id="add" onclick="myFunction()">Add Dataset</button> 
 
<canvas id="lineChart" height="190"></canvas>