2017-05-09 2 views
0

Ich möchte ein lineares Diagramm der Währungskurse zeichnen. Es gibt Tage, an denen keine Preise vom Markt kommen (Feiertage). Ich möchte diese Tage aus der Tabelle entfernen, aber ohne hässliche Lücken oder gerade Linien zwischen den Tagen mit Raten.Zeichnen lineares Diagramm ohne Lücken in Chart.js

Sie können ein Beispiel auf diesem Diagramm sehen: linear chart with gap between 2nd and 4th of May

Am 3. Mai keine Daten vorhanden sind, wird das Diagramm verknüpft und das fehlende Datum wird von der Legende entfernt.

Wie bekomme ich einen solchen Effekt mit Chart.js?

+0

Dies ist möglicherweise ein Duplikat von: https://stackoverflow.com/questions/25284124/chart-js-gap-between-points –

+0

@DonnyBridgen Diese Frage scheint tatsächlich das Gegenteil der verknüpften Frage zu fragen. Diese Frage fragt, wie man Lücken schafft. In dieser Frage geht es darum, Lücken zu vermeiden. –

+0

@ArturOwczarek Haben Sie eine JSFiddle mit dem Code, den Sie gerade verwenden, den Sie teilen können? –

Antwort

0

Ich habe einen Workaround gefunden. Es erfordert etwas Hacking, aber es funktioniert:

1) Ändern Sie zunächst Ihren Datensatz. Iteriere alle Punkte und mutiere X-Werte so, dass sie mit der neuen Position in deinem Diagramm übereinstimmen. Speichern Sie den ursprünglichen X-Wert in einer Eigenschaft für zukünftige Verwendung (in Tooltips)

2) Jetzt können Sie die Daten auf dem Diagramm zeichnen und sie richtig aussehen. Das Problem ist mit Tooltips und Ticks.

Wie mit den Zecken beschäftigen:

Die Zecken sind eine Liste von mutierten Zahlen (sie auf ihre ursprünglichen Werte entsprechen nicht). Du hast einen Hack benutzt. Überschreiben Sie vorübergehend chartController.ticks in afterBuildTicks Methode mit Array von Objekten (anstelle von einfachen Zahlen) mit ursprünglichen entsprechenden x-Werte. Sie müssen den ursprünglichen x-Wert für jedes Häkchen annähern. Damit können Sie diese Informationen in Ticks Callback verwenden, um korrekte Etiketten für Ticks zurückzugeben. Mit solchen mutierten Daten wird das Diagramm nicht plotten. Sie müssen es in den Zustand vor der Mutation zurückversetzen. In der Methode afterTickToLabelConversion die Ticks wiederherstellen. Denken Sie daran, dass sie jetzt in der Eigenschaft gespeichert sind ticksAsNumbers

Der ähnliche Hack sollte mit Tooltips Callbacks erfolgen. Sie haben Zugriff auf den Dataset und den utated x -Wert. Ungefährer originaler x-Wert für mutiertes x und das ist es.

Verwandte Themen