Hilfe bei chart.js-Script

gogekko

Themenstarter
Bekanntes Mitglied
Hallo,

wer ist so freundlich und zeigt mir, was zu tun ist. Sehr gerne mit Erklärung, damit ich etwas lernen kann.

Ich möchte erreichen, das die Datensätze pro Jahr in einer definierten Farbe (also hier im Beispiel: 2 rote Balken, 3 grüne Balken, 2 blaue Balken) angezeigt werden.

Vielen Dank!

Javascript:
 <canvas id="myChart2" width="280" height="200"></canvas>
 <script src="chart.min.js"></script>
 <script>
 const ctb = document.getElementById('myChart2').getContext('2d');
 const myChart2 = new Chart(ctb, {
  type: 'bar',
  data: {
  datasets: [{
  label: '# Out',
  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},
],

backgroundColor: [
 'rgba(0, 0, 0, 0.34)'
 ],

borderWidth: 1
  }]
  },
   options: {
  scales: {
   y: {
    beginAtZero: true
      }
 }
  }
   });
   </script>
 

DSmdM_G

Bekanntes Mitglied
Was zu tun ist: RTMF

Schon einmal diese Seite gesehen?

In dem dunklen Feld auf Setup gehen, da sieht man dann den Code für das Beispiel darüber. Unter anderem die backgroundColor Einträge. Wofür die sind steht weiter unten. Pro Wert (Bar) gibt es einen Eintrag. Du kannst die dort sogar direkt ändern und das Resultat wird online angezeigt.

In Deinem Beispiel definierst Du nur eine Balkenfarbe

Gruß
Maus-Gucker
 

gogekko

Themenstarter
Bekanntes Mitglied
Das hat überhaupt nichts mit RTFM oder der genannten Seite zu tun - ich schrieb "Beispiel". Es handelt sich im Original nicht um 7 Datensätze sondern >70 und nicht um 3 Jahre sondern > 20.
Für eine vernünftige Lösung bedarf es vermutlich nur einiger Codezeilen die ich jedoch nicht hinbekomme und daher um Hilfe bitte.
 

dr_tommi

alter Oldie
Das hat überhaupt nichts mit RTFM oder der genannten Seite zu tun
Doch, hat es.
Dort siehst du den Aufbau der Datenstrukturen.
ich kannte das Script nicht und habe nach 30 Minuten verstanden worum es geht und wie man es einsetzt.
- ich schrieb "Beispiel". Es handelt sich im Original nicht um 7 Datensätze sondern >70 und nicht um 3 Jahre sondern > 20.
Das passt.
Für eine vernünftige Lösung bedarf es vermutlich nur einiger Codezeilen die ich jedoch nicht hinbekomme und daher um Hilfe bitte.
du warst schon auf dem richtigen Weg, hast nur bei der Definition der Daten schon einen entscheidenden Fehler gemacht.

Bei mir sieht das mit deinen Daten nach einer ersten Anpassung so aus:
1651042764607.png


Du kannst nicht erwarten dass ein Script für die Darstellungen von Charts so intelligent ist dass es deine Daten auch noch auswertet und in Abhängigkeit der Werte auch noch entsprechend formatiert. Wir sind ja hier nicht bei den Power Apps.
Für dein Problem müsste man den Datenblock vorher so aufbereiten, dass für unterschiedliche Daten der X-Achse unterschiedliche Farben definiert werden und die dann nutzen.

Wenn ich es schaffe, bastel ich dir nachher mal ein Beispiel mit ein paar mehr Daten.
 
Zuletzt bearbeitet:

dr_tommi

alter Oldie
Es handelt sich im Original nicht um 7 Datensätze sondern >70 und nicht um 3 Jahre sondern > 20.
Das ist nicht das Problem.
Hier mal ein Beispiel mit 134 Datensätzen.
1651045794884.png

Die Datenaufbereitung muss vorher passieren. Das kann das Script nicht
Du must also vorher festlegen, welches Jahr welche Farbe bekommen soll und wie bzw. womit die Balken beschriftet werden sollen.
ich hab hier einfach mal mit Excel ein paar Datensätze mit Zufallszahlen generiert und mit den Farbnamen (deshalb die Anzahl ;) ) kombiniert.
Man muss also nicht rgb(bla,bla,bla, bla) schreiben sondern kann ganz einfach yellow oder darkblue als Farbe nehmen.
 

gogekko

Themenstarter
Bekanntes Mitglied
du warst schon auf dem richtigen Weg, hast nur bei der Definition der Daten schon einen entscheidenden Fehler gemacht.

Bei mir sieht das mit deinen Daten nach einer ersten Anpassung so aus:
Welchen Fehler habe ich gemacht? Könntest Du bitte mal Dein angepasstes Script posten damit ich das verstehe? - Danke!
 

dr_tommi

alter Oldie
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.
borderWidth: 1
}]
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.
 

Anhänge

  • test1.txt
    1,2 KB · Aufrufe: 16
  • test2.txt
    5,5 KB · Aufrufe: 12

gogekko

Themenstarter
Bekanntes Mitglied
Vielen Dank für Deine Hilfe und Erklärungen. Die Struktur der Daten finde ich persönlich sehr unübersichtlich - aber es hat funktioniert.
 

dr_tommi

alter Oldie
Die Struktur der Daten finde ich persönlich sehr unübersichtlich
Man gewöhnt sich an alles.
Ich muss jetzt viele Daten als JSON verarbeiten, da ist es ähnlich.
Die Daten in der Form wie du sie nutzen wolltest kann das Script zwar auch, allerdings nur im Typ "scatter", also als Punkt-Diagramm.
Das sieht dann so aus:
1651299599323.png

Im Anhang ein Beispiel dazu.

Wenn es allerdings um Balken oder Linien geht, dann musst du die Daten vorher aufbereiten.
Eine Alternative wäre eine Art Wrapperfunktion, die dann die Daten von deiner Version in die geforderte Form umbaut.
Aber ich denke mal dass dieser Aufwand den Nutzen übersteigen würde.
 

Anhänge

  • test3.txt
    657 Bytes · Aufrufe: 7
Oben Unten