2016-07-13 9 views
1

Ich verwende ChartJS (v2.1), um Liniendiagramme zu erstellen. Ich habe keine feste Größe Dataset, und ich möchte die Liniendiagramm seine Breite anzupassen, basierend auf, wie groß die Datenmenge ist:Wie wird ChartJs Liniendiagrammbreite basierend auf der Datasetgröße dynamisch festgelegt?

Large-Datensatz: enter image description here

Kleinere Datenmenge: enter image description here

Ich möchte, dass das große Dataset das Diagramm breiter macht (anstatt auf die verfügbare Breite zu skalieren). Das Anzeigen einer horizontalen Bildlaufleiste ist eine Option, aber ich kann die Breite des Diagramms nicht angeben, da ich nicht weiß, wie groß das Dataset sein wird.

Gibt es eine Option zum Festlegen der Mindestbreite zwischen X-Achsen-Ticks? Oder das Diagramm automatisch vergrößern? Ich habe versucht, die Lösung in this question zu implementieren, aber ich kann die Breite während der Entwurfszeit nicht bestimmen.

Meine Auszeichnungs:

<div class="chartWrapper"> 
    <canvas id="f1-chart" class="chart chart-line" chart-data="f1Data" chart-labels="f1Labels" chart-series="f1Series" chart-options="f1Options"></canvas>   
</div> 

Und Chart Optionen:

scope.f1Options = {    
    legend: false,  
    responsive: true,    
    maintainAspectRatio: false 
} 
+0

Die [Lösung] (http://stackoverflow.com/questions/35854244/how-can-i-create-a-horizontal-scrolling-chart-js-line-chart-with-a-locked-y- Achse), die Sie gaben (und seine [Geige] (http://jsfiddle.net/mbhavfwm/)) funktioniert perfekt. Welches Problem hast du ? – tektiv

+0

@tektiv die Breite ist in dieser Lösung als 1200px vordefiniert. Wenn Ihr Datensatz sehr klein oder zu groß ist, wird der Diagrammmaßstab jedes Mal anders sein. Ich möchte, dass das Diagramm basierend auf dem Dataset automatisch wächst, während die Skalierung beibehalten wird. –

+1

Nun könnte man die Geige als Basis verwenden und dann dynamisch die Breite der 'Leinwand 'ändern (wie' Breite = 50px * Anzahl der Werte ') – tektiv

Antwort

-1

ich diese voller Breite Boolean auf chartjs.org gefunden wahr Marks, dass dieses Feld die volle Breite der Leinwand nehmen sollte (Pushing unten andere Kästen) http://www.chartjs.org/docs/#chart-configuration-title-configuration
hoffe das hilft.

+0

Es hilft dem OP nicht, da es die volle Breite des ** canvas **, was in allen Graphen von Chart.js bereits der Fall ist, da der Wert standardmäßig "true" ist. – tektiv

Verwandte Themen