Erstelle ein mehrzeiliges Diagramm mit Chart.js
Ich versuche ein mehrzeiliges Diagramm mit Chart.js zu erstellen
Ich kann dies für 1 Zeile tun und ich kann 2 Zeilen mit einer festen Datenstruktur tun, aber ich kann nicht mehrere Zeilen erhalten, um Daten anzuzeigen, die an die Datenstruktur übergeben wurden.
hier ist die Beispielverwendung abgekürzt von der Website chart.js
http: //www.chartjs.org/docs/#getting-starte
var myLineChart = new Chart(ctx).Line(data);
var data = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
{fillColor: "rgba(220,220,220,0.2)",
strokeColor: "rgba(220,220,220,1)",
data: [65, 59, 80, 81, 56, 55, 40]
},
{fillColor: "rgba(151,187,205,0.2)",
strokeColor: "rgba(151,187,205,1)",
data: [28, 48, 40, 19, 86, 27, 90]
}
]};
Nun mein Code,
lineChartData = {}; //declare an object
lineChartData.labels = []; //add 'labels' element to object (X axis)
lineChartData.datasets = []; //add 'datasets' array element to object
dataset = {}; //a single dataset is an object
dataset.fillColor = "rgba(0,0,0,0)";
dataset.strokeColor = "rgba(200,200,200,1)";
dataset.data = []; //contains the 'Y; axis data
for (line = 0; line < 4; line++) {
y = [];
lineChartData.datasets.push(dataset); //create a new line dataset
for (x = 0; x < 10; x++) {
y.push(line + x); //push some data aka generate 4 distinct separate lines
lineChartData.labels += x; //adds x axis labels
} //for x
lineChartData.datasets[line].data = y; //send new line data to dataset
} //for line
ctx = document.getElementById("Chart1").getContext("2d");
myLineChart = new Chart(ctx).Line(lineChartData);
}
das Diagramm zeigt immer viermal dieselbe zuletzt erzeugte Linie an.
Ich bin neu in Javascript und ich bin sicher, ich mache etwas falsch mit der Erstellung der Objektstruktur. Ich habe einen Tag damit verbracht, dies herauszufinden.
Es gibt eine chart.js-Option, um Werte wie folgt hinzuzufügen, sollte ich diese verwenden
.addData (valuesArray, label)