Balkengrafik mehrerer Jahre mit <ftui-chart>

[DocCyber]

Hallo zusammen.

das Anzeigen von Tagesdaten in einem Chart funktioniert so:

Code Auswählen Erweitern

<ftui-chart unit="month">
  <ftui-chart-data log="FileLog_Days" file="CURRENT" spec="4:pvData.Wert" type="bar"></ftui-chart-data>
</ftui-chart>Du darfst diesen Dateianhang nicht ansehen.

bei Monatswerten funktioniert das analog:

Code Auswählen Erweitern

<ftui-chart unit="year">
  <ftui-chart-data log="FileLog_Months" file="CURRENT" spec="4:pvData.eTest" type="bar"></ftui-chart-data>
</ftui-chart>Du darfst diesen Dateianhang nicht ansehen.

Aber wie funktioniert es bei Jahreswerten?
Auf der x-Achse hätte ich dann gern 2019, 2020, 2021, 2022, ...
Ich habe schon vieles ausprobiert, aber ich bekomme es nicht hin.
Ohne ´unit´ wird eine Stundenachse verwendet, ´years´ gibt es nicht.
Hier wäre etwa ´decade´ wünschenswert, um die letzten 10 Jahre dazustellen.

Code Auswählen Erweitern

<ftui-chart unit="decade">
  <ftui-chart-data log="FileLog_Years" file="CURRENT" spec="4:pvData.eTest" type="bar"></ftui-chart-data>
</ftui-chart>
Ich kann mir nicht vorstellen, dass es mit chart.js nicht funktioniert.
Vermutlich müsste man hierfür den Code in chart.component.js anpassen (@setstate)
Leider habe ich kaum Kenntnisse von JS...

Hat jemand eine Lösung?

[Kai-Alfonso]

ich beobachte mal das Thema, weil das Problem habe ich vor Monaten auch schon mal erfolglos gepostet

[DocCyber]

Weil ich mit JS so gut wie keine Erfahrung habe, musste ich mich erst mal einen Tag durch den Code von chart.component.js durchquälen, bevor ich darin ein paar kleine Ergänzungen (keine Änderungen!) machen konnte.
Es ist nicht so, dass ich mit dem Ergebnis wirklich zufrieden bin, aber ich kann damit vorläufig leben.

Das Problem ist, dass in chart.component.js eine Zeitachse als Standard vorgegeben ist.
Damit die Balken zentriert über den Jahreslabeln angezeigt werden, muss der Timestamp der X-Achse immer das Neujahr des Jahres sein, also z.B. 2023-01-01_00:00:00.
Meine Code-Ergänzung ist eine neue unit namens '10y'. In Verbindung mit den anderen Ergänzungen  bewirkt das die Darstellung der letzten 10 Jahre.

Code Auswählen Erweitern

<ftui-chart y-min="0" unit="10y">
  <ftui-chart-data log="FileLog_teYears" file="CURRENT" spec="4:pvData.eTest" type="bar">
  </ftui-chart-data>
</ftui-chart>
Du darfst diesen Dateianhang nicht ansehen.

Meine Änderungen an chart.component.js sind im angehängten PDF zu sehen (grün kommentiert)



Es wäre aber natürlich besser, wenn für die Jahreszahlen Kategorien verwenden könnte, denn dann ist das Datum des Timestamp egal; nur das Jahr müsste natürlich ausgelesen werden.
Das, was mir vorschwebt, ist bei Chart.js zu sehen:
Du darfst diesen Dateianhang nicht ansehen.
Nur habe ich leider viel zu wenig JS-Kenntnisse, wie ich den zugehörigen Code bei chart.component.js einbauen kann.