Brauche Chart.js Unterstützung

Ha23fa

Themenstarter
Mitglied
Hallo, ich arbeite an einem Django-Projekt mit Chart.js. Ich habe ein gestapeltes Diagramm mit 3 Diagrammen übereinander. Die x-Achse ist die Zeit und ich möchte der x-Achse 2 Daten geben und es sollte mir die x-Achse in bestimmten Schritten geben. Zum Beispiel alle 30 Sekunden. Kann mir jemand hierbei helfen?
Link zum code: https://jsfiddle.net/ha23fa/tdcsejL1/21
 

dr_tommi

alter Oldie
Die x-Achse ist die Zeit und ich möchte der x-Achse 2 Daten geben und es sollte mir die x-Achse in bestimmten Schritten geben. Zum Beispiel alle 30 Sekunden.
Also was denn nun? X und X und X?
Und warum alle 30 Sekunden wenn die Werte nur im Minutenabstand vorhanden sind?
Was willst du sehen bzw. erreichen?
Eine Einteilung der X-Achse mit Zwischenmarkierungen?
 

Ha23fa

Themenstarter
Mitglied
Ich will das die X-Achse linear verläuft bzw. jede 30 Sekunden ein wert hat und keine krumme Sekundenzahlen hat.
Das ist die Aufgabe, die ich bekommen habe.
VG
 

dr_tommi

alter Oldie
Also bei deinen Werten sollen Markierungen bzw. die Beschriftungen jeweils bei :0 und :30 sein, und das obwohl die Werte bei :12 oder :31 liegen?
Aber die Daten sollen schon noch bei :12 und :31 gezeichnet werden?
Das Skript kann nur darstellen was auch geliefert wird.
Das einzige was man machen kann, ist die Zwischenwerte ausblenden so dass nur bestimmte Werten als Beschriftung genommen wird.
Bei Datums- bzw. Zeitwerten sollte das klappen.
 

dr_tommi

alter Oldie
Bisher nur eine grobe Vermutung, aber ich gehe davon aus, dass man das auf dieser Basis machen müsste.
Code:
 scales: {
        xAxes: [{
            type: 'time',
            ticks: {
                minRotation: 30,
                maxRotation: 60,
            },
            time: {
                min: __T_MIN__,
                max: __T_MAX__,
                minUnit: 'second',
                displayFormats: {
                    second: 'YYYY-MM-DD HH:mm:ss',
                    minute: 'YYYY-MM-DD HH:mm',
                    hour: 'YYYY-MM-DD HH',
                    day: 'YYYY-MM-DD',
                    week: 'YYYY-MM-DD',
                    month: 'YYYY-MM',
                    quarter: 'YYYY [Q]Q',
                    year: 'YYYY',
                },
                tooltipFormat: 'YYYY-MM-DD HH:mm:ss',
            },
        }],

Das ist jetzt nur aus einem Beispiel rauskopiert und nicht vollständig, sollte aber in die richtige Richtung gehen.
Soweit ich das verstanden habe geht das mit einer Kombination von "Displayformat" für die Darstellung und "ticks" für die Zwischenwerte.

Vielleicht schaffe ich es nachher mal das in das Beispiel einzubauen, jetzt gibt es erstmal Frühstück.
 

dr_tommi

alter Oldie
Ich habe mich jetzt mal etwas mit dem Problem beschäftigt.
Solange es nur eine Datenreihe im Diagramm ist klappt das alles wie gewünscht.
1652550216838.png

Code:
00:01:00
00:01:20
00:01:36
00:02:56
00:03:33
00:04:40
00:04:48
00:05:54
Diese x-Werte werden genutzt und die Beschriftung sieht dann so aus.

1652550050117.png

Aber sobald es mehr sind scheinen die Formatierungen anders zu funktionieren.
 
Zuletzt bearbeitet:
Oben Unten