2016-08-03 19 views
3

Ich habe ein c3 Liniendiagramm mit einer Kategorie X-Achse.Entfernen Sie die Polsterung von c3 Liniendiagramm

\t var data = { 
 
\t \t x: "x", 
 
     columns: [ 
 
\t \t \t ["x", "a", "b", "c", "d"], 
 
\t \t \t ["data1", 0, 1, 2, 3], 
 
\t \t \t ["data2", 3, 2, 1, 0], 
 
\t \t ], 
 
\t \t labels: true 
 
    }; 
 
\t var axis = { 
 
     x: { 
 
      type: 'category', 
 
\t \t \t tick: { 
 
\t \t \t \t centered: true, 
 
\t \t \t }, 
 
\t \t \t padding: 0 
 
     }, 
 
\t \t y: { 
 
\t \t \t padding: {bottom:5, top:5} 
 
\t \t } 
 
    }; 
 
\t ccChartL = c3.generate({ 
 
\t \t bindto: '#ccLdiv', 
 
\t \t data: data, 
 
\t \t axis: axis, 
 
\t \t transition:{duration: 1000} 
 
\t });
<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.min.css" rel="stylesheet"/> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.min.js"></script> 
 
<div id="ccLdiv"></div>

Auf der linken Seite befindet sich eine Lücke zwischen dem Anfang der Zeile und der Achse. Gleich rechts. Wie entferne ich es? Ich möchte den Anfang der Zeilen, Kategorie a, auf dem x-Wert 0 haben. Ich habe versucht, die Antworten von Stackoverflow zu sehen, aber es hat nicht funktioniert. Padding wird auf 0 gesetzt. Wenn ich auf einen positiven Wert setze, wird es nur noch enger. Vielen Dank im Voraus.

Antwort

1

Eine negative Auffüllung von -0,5 oder etwas weniger (-0,49) wird diese Lücken beseitigen.

Allerdings wird es Ihre ersten und letzten Etiketten leicht abschneiden, benötigen Sie eine Formel von Arten, z.

padding: -0.5 - (0.01 * no_of_datapoints) 
+0

Vielen Dank, das hat perfekt funktioniert. –