Chartist.js füllen Bereich füllen den ganzen Weg nach rechts
Ich verwende showArea: true , kann aber nicht die entsprechende Einstellung finden, um die Füllung vollständig zu machen. Beispiel:
Ich nehme an, dass dies daran liegt, dass ich nach dem Ende keine Datenpunkte mehr habe, aber ich möchte nicht, dass die grüne Linie sich ganz nach oben erstreckt. Gibt es einen anderen Weg, dies zu erreichen?
3 Antworten
Sie verwenden showArea:true , um den Bereich zu rendern. Wie Sie jedoch bemerkt haben, füllt showArea nur den Bereich, der nur der gezeichneten Linie zugeordnet ist.
Was Sie suchen, ist ein zusätzlicher Bereich ohne Linie.
Um diesen Effekt zu erzielen, müssen Sie zwei verschiedene Zeilen erstellen: Die erste Zeile enthält showArea: false und erweitert sich auf W3, wie in Ihrem Beispiel gezeigt. Dadurch wird die hellgrüne Linie so dargestellt, wie Sie es bereits getan haben.
Die zweite Zeile wird unsichtbar haben showLine: false und showArea: true und erstreckt sich ganz nach oben bis W8.
Mit anderen Worten, Sie möchten tatsächlich zwei verschiedene Dinge rendern. Einer ist eine Linie und einer ist ein Füllbereich.
Damit der Bereich hervorgehoben wird, müssen Sie entsprechende Daten einfügen. Die showArea -Eigenschaft erweitert so viel wie die Daten. Hier ist ein Proof of Concept:
Die beiden Bereiche sind in den Daten hervorgehoben, die sie repräsentieren.
Hoffe, das hilft.
Tags und Links javascript chartist.js