ersetzen von chart.js mit chartist.js

[gaenseklein]

chart.js arbeitet mit canvas, gewünscht ist aber svg. der versuch, mit canvas2svg.js zu arbeiten hat nicht auf anhieb geklappt und es ist fraglich, ob die fehlersuche lohnt. denn dagegen spricht:

1. der Aufwand - ist es aufwendiger, diesen Prozess zu fixen oder eine Alternative zu nutzen, die direkt svg unterstützt?
2. die Abhängigkeit - mit canvas2svg kommt die nächste Abhängigkeit ins Spiel, die in zukunt probleme bringen kann
3. der Ansatz - es ist ziemlich dämlich, erst eine canvas und dann daraus eine svg zu erstellen. chart.js wird überhaupt nicht mehr in seinem potential genutzt und es muss anschließend alles von hand nachprogrammiert werden falls erwünscht - bspw. animationen, tooltips... darüber hinaus wird der svg-code nie so gut werden können wie bei einem direkten auf svg zugeschnittenem programm

Alternative: Auf der Comparison-Table wurde es verglichen mit chartist, welches svg export kann: https://gionkunz.github.io/chartist-js/index.html chartist kann imho alle graphen, die für uns sinnvoll sind zu unterstützen. chartjs kann zwar mehr, aber die wichtigsten drei sind da und dazu noch etliche optionen. dazu gibt es einige plugins, die sofort ins auge stechen und es auch als womöglich besser als chart.js erscheinen lassen:

• accessibility plugin: unterstützung für screenreader (nice)
• zoom plugin: klingt nice. könnte sinnvoll sein, muss aber nicht

was zu tun ist:

• [x] chartist einbinden
• [x] helptext schreiben
• [x] datalabel aus mdcode filtern
• [x] data aus mdcode filtern
• [x] charttypen aus mdcode filtern
• [ ] dimension der chart berechnen (breitbild, hochbild, 3:4, 16:9 etc)
• [x] chart ausspucken lassen
• [x] achsen mit achsenlabel versehen
• [x] animationen ausprobieren
• [x] plugin accessibility aktivieren
• [x] export testen
• [x] optionen aktivieren
• [x] syntax für optionen erstellen
• [x] css anpassen (größe etc.) wird vom theme-css erledigt
• [x] viewbox festlegen

[gaenseklein]

größe der chart-svg muss evtl. über eine viewBox festgelegt werden, wenn sie nicht per javascript neu erstellt werden soll bei späterer präsentation. siehe https://css-tricks.com/scale-svg/ chartist macht das extra nicht, sondern erstellt die svg für die jeweilige größe neu. dadurch kann chartist solche sachen machen wie bspw. die labels verändern: bei großem bildschirm verwende die vollen label - bspw. january, february, march - bei kleinem bildschirm verwende kürzel - bspw. jan, feb, mar... auch können labelgrößen angepasst werden. beim viewBox-Ansatz sind die Größen/Relationen bei Erstellung festgelegt. Vergrößert sich die Chart, vergrößert sich auch die Label-Text-Größe etc. Letztere können zwar per CSS angepasst werden, aber das kann zu unschönen Ergebnissen führen, bspw. Überlappungen der Labels.

[gaenseklein]

chart wird jetzt selbst in einem grid angezeigt

[gaenseklein]

viewbox klappt jetzt im chromium und firefox (firefox brauchte parent-Element anstelle direkt vom svg die clientWidth und clientHeight) - noch safari testen...

[gaenseklein]

dimension berechnen brauchen wir nicht. statisches 16:9 format gewählt.