Chart.js: x-as

[Maasluip]

Ik weet niet of er mensen Charts.js gebruiken. Ik probeer mijn zonnepaneelstatistieken ermee te visualiseren. Als ik de dagopwek van alle dagen in één grafiek zet, met als labels op de x-as de datum erbij, dan zoekt de grafiek zelf uit welke labels gezet worden en wat de gridlines zijn. Dan krijg ik nu gridlines per 65 dagen.
Ik wil liever gridlines per maand/2 maanden/3 maanden en als labels een label per jaar.
Is dat te configureren? Je moet dan de labels loskoppelen van de data op de een of andere manier.

Charts.js maakt er bij mij dit van:


En ik heb liever iets als dit:


Of is er een framework die dat wel kan?

[ Voor 3% gewijzigd door Maasluip op 12-08-2021 14:53 ]

[-LA-]

Ligt er een beetje aan hoe ingewikkeld je het uiteindelijk wil maken maar je kan ook gridlines uitschakelen en met bijvoorveeld "line annotations" verticale lijnen creëren: https://www.chartjs.org/chartjs-plugin-annotation/

Vraagt wel om iets meer creativiteit/code van de programmeur

[Mijzelf]

offtopic: wat is er dit jaar met je panelen aan de hand?

[Maasluip]

Omvormer was stuk en met de nieuwe omvormer ook maar een paar panelen erbij gelegd.

[Snake]

https://jsfiddle.net/CSharpFan/pbtncmje/2/

Bijna... Moet de jaren 'ticks' nog correct krijgen.

[Maasluip]

Ziet er al een stuk beter uit ja, alleen doet dat het bij mij niet.

Vreemd. Als ik mijn html in die fiddle paste doet hij het ook niet, wel als ik de <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> uit de fiddle weghaal.
Maar zonder dat doet de html het weer niet.

Hij lijkt een probleem met type: "time", te hebben.

[edit]
Werkt nu. Iets met een adapter installeren.

Met source: 'auto' in ticks worden de gridlines wel logisch geplaatst, maar ze staan in het midden van het jaar. Dus dat moet een half jaar opschuiven.

[edit]
Volgens mij kan dat niet en is het een bekende bug.

[ Voor 149% gewijzigd door Maasluip op 12-08-2021 22:07 ]

[Snake]

Maasluip schreef op donderdag 12 augustus 2021 @ 20:52:
Ziet er al een stuk beter uit ja, alleen doet dat het bij mij niet.

Vreemd. Als ik mijn html in die fiddle paste doet hij het ook niet, wel als ik de <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> uit de fiddle weghaal.
Maar zonder dat doet de html het weer niet.

Hij lijkt een probleem met type: "time", te hebben.

[edit]
Werkt nu. Iets met een adapter installeren.

Met source: 'auto' in ticks worden de gridlines wel logisch geplaatst, maar ze staan in het midden van het jaar. Dus dat moet een half jaar opschuiven.

[edit]
Volgens mij kan dat niet en is het een bekende bug.

Ik importeer de chart via resources links.

Ik ben aan het kijken om een custom scale te maken die de labels -50% rendert. Ofzoiets.

[Snake]

@Maasluip
https://jsfiddle.net/CSharpFan/pbtncmje/6/