Welchen Fehler habe ich gemacht?
Der Fehler liegt in der Struktur der Daten.
Könntest Du bitte mal Dein angepasstes Script posten damit ich das verstehe?
kann ich machen.
Um so ein Balkendiagramm zu bauen hast du 3 Stellschrauben im Script.
const myChart2 = new Chart(ctb, {
type: 'bar',
Mit Type legt man den Typ des Diagramms fest, hier also Balken.
data: {
datasets: [{
label: '# Out',
Mit der Anweisung Label wird die Beschriftung des Diagramms eingestellt. Bei mehreren Balken oder Linien kann man hiermit die einzelnen Balken bzw. Linien erläutern.
data: [
{x: '2015-01-25', y: 12.71},
{x: '2015-04-11', y: 12.96},
{x: '2016-08-10', y: 14.86},
{x: '2016-11-08', y: 14.52},
{x: '2016-12-29', y: 14.27},
{x: '2017-02-23', y: 13.63},
{x: '2017-03-23', y: 13.43},
],
Hier liegt dein Fehler.
Das Script will die Daten nicht in Form von x,y-Koordinaten bekommen sondern in einer etwas anderen Form.
Geliefert werden müssen die x-Achsen-Beschriftungen, die Werte und die Farben für die einzelnen Balken und zwar jeweils getrennt und an verschiedenen Stellen.
backgroundColor: [
'rgba(0, 0, 0, 0.34)'
],
Hiermit werden die Farben der Balken festgelegt.
Hiermit kann die Breite des Rahmens der Balken festgelegt werden
},
options: {
scales: {
y: {
beginAtZero: true
}
Hier kann man noch einige Einstellungen zur Skalierung machen, hier also ob die Y-Skala bei 0 anfängt oder nicht.
Jetzt also zu dem funktionierenden Script.
const myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: [
'2015-01-25',
'2015-04-11',
'2016-08-10',
'2016-11-08',
'2016-12-29',
'2017-02-23'
],
datasets: [{
label: '# of Orders',
Der Unterschied zu deinem Script ist der Eintrag "labels".
Hier stehen die Beschriftungen der X-Achse drin, hier also die Datumswerte. Textwerte in Hochkomma.
"Label" beschriftet das Diagramm als ganzes, kann also auch weggelassen werden.
data: [
12.71,
12.96,
14.86,
14.52,
14.27,
13.63
],
Das sind die eigentlichen Werte der Balken.
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(255, 99, 132, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(54, 162, 235, 0.2)',
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(255, 99, 132, 1)',
'rgba(75, 192, 192, 1)',
'rgba(75, 192, 192, 1)',
'rgba(75, 192, 192, 1)',
'rgba(54, 162, 235, 1)',
],
Hier wird für jeden Balken festgelegt in welcher Farbe und wenn ja mit welchem Rand die Balken dargestellt werden sollen.
Da kann man sowohl die RGB-Werte nehmen als auch die Namen der Farben wie "darkblue", "yellow", "red" usw. und zwar in genau der gleichen Anzahl wie mal Balken hat.
Die Anzahl kann mit der Anzahl der Labels und Data übereinstimmen, muss aber nicht. Man kann also jeden balken mit einer eigenen farbe anzeigen lassen oder aber alle mit der gleichen.
Allerdings muss dann mindestens eine Farbe definiert werden damit die Balken überhaupt dargestellt werden.
Die Werte für Labels, Data und auch die Farben werden jeweils mit Komma getrennt, nachkommanstellen mit Punkt.
options: {
scales: {
y: {
beginAtZero: false
}
}
}
});
</script>
Hier beginnt die Darstellung nicht bei 0 sondern das Script nimmt einen Wert etwas unterhalb des niedrigsten Y-Wertes.
Im Anhang zwei Scripte, die so auf meinem Server (xampp unter Windows 10) laufen.
Das erste ist das mit deinen Werten, also die erste Grafik von mir oben.
Das zweite ist das Beispiel mit den 134 Werten und der Benennung der Farben, also die zweite Grafik.
Als Besonderheit habe ich in den Scripten die chart.js online eingebunden, man muss es also nicht erst installieren.
) kombiniert.