Chartist.js machen füllen Bereich erweitern den ganzen Weg nach rechts

Question

Ich benutze showArea: true aber kann nicht die entsprechende Einstellung zu finden, dass füllen den ganzen Weg. Beispiel:

Ich nehme an, das liegt daran, dass ich keine Datenpunkte nach, wo es endet, aber ich will nicht die grüne Linie den ganzen Weg über die Spitze zu verlängern. Gibt es einen anderen Weg, dies zu erreichen?

Answer 1

Sie verwenden showArea:true, um den Bereich zu rendern. Wie Sie jedoch bemerkt haben, füllt showArea den Bereich, der nur der gezeichneten Linie zugeordnet ist.

Was Sie suchen, ist ein zusätzlicher Bereich ohne eine Linie.

Um diesen Effekt zu erzielen, müssen Sie zwei verschiedene Zeilen erstellen: Die erste Zeile wird showArea: false haben und auf W3 erweitert werden, wie in Ihrem Beispiel gezeigt. Dadurch wird die hellgrüne Linie wie bereits angezeigt.

Die zweite Zeile wird unsichtbar haben showLine: false und showArea: true und erstreckt sich über den ganzen Kopf bis W8.

Mit anderen Worten, Sie möchten eigentlich zwei verschiedene Dinge rendern. Einer ist eine Linie und einer ist ein Füllbereich.

Answer 2

Ich denke, dass die wichtigste Lösung für Ihr Problem ist, Display zu verwenden: Inline-Block; zum Beispiel:

div.page { 
color: white; 
background: black; 
margin: auto; 
padding: 1em; 
display:inline-block; 
} 

Answer 3

Um den Bereich markieren Sie die entsprechenden Daten einfügen müssen. Die showArea -Eigenschaft erweitert so viel wie die Daten. Hier ist ein Proof of Concept:

/* Add a basic data series with six labels and values */ 
 
var data = { 
 
    labels: [1, 2, 3, 4, 5], 
 
    series: [ 
 
     [1, 5, 10, 15, 20], 
 
     [1, 20] 
 
    ] 
 
}; 
 

 
/* Set some base options (settings will override the default settings in Chartist.js *see default settings*). We are adding a basic label interpolation function for the xAxis labels. */ 
 
var options = { 
 
    showArea: true, 
 
    axisX: { 
 
     labelInterpolationFnc: function (value) { 
 
      return 'Week ' + value; 
 
     } 
 
    } 
 
}; 
 

 

 
/* Initialize the chart with the above settings */ 
 
new Chartist.Line('.ct-chart', data, options);

.ct-chart { 
 
    width: 450px; 
 
    height: 250px; 
 
}

<link href="https://rawgit.com/gionkunz/chartist-js/master/dist/chartist.min.css" rel="stylesheet"/> 
 
<script src="https://rawgit.com/gionkunz/chartist-js/master/dist/chartist.min.js"></script> 
 
<div class="ct-chart ct-square"></div>

Die beiden Bereiche innerhalb der Daten hervorgehoben werden sie vertreten.

Hoffe, das hilft.