Chart.js Padding Canvas

Question

Ich benutze neueste chart.js-Bibliothek, um ein Liniendiagramm ohne Skalen zu generieren, aber es gibt ein Auffüllen Problem und obere und untere Punkte sind abgeschnitten. Ich konnte keine Option zum Auffüllen von Canvas sehen.

Meine Config ist wie unten.

var config = { 
    type: 'line', 
    data: { 
     labels: ["January", "February", "March", "April", "May", "June", "July"], 
     datasets: [{ 
      label: "Sales", 
      data: [10, 20, 50, 25, 60, 12, 48], 
      fill: true, 
      lineTension: 0.25, 
      borderColor: "#558aeb", 
      backgroundColor: "#558aeb" 
     }] 
    }, 
    options: { 
     responsive: true, 
     legend: { 
      display: false 
     }, 
     tooltips: { 
      mode: 'label' 
     }, 
     hover: { 
      mode: 'dataset' 
     }, 
     scales: { 
      xAxes: [{ 
       display: false 
      }], 
      yAxes: [{ 
       display: false 
      }] 
     } 
    } 
}; 

Answer 1

Ich glaube, dass Ihr Problem nicht auffüllen, aber ich könnte falsch liegen. Wie ich es sehe, ist Ihr Problem die automatische Erkennung der Höhe des Zeichnungsbereichs, wenn die maximale Anzahl in Ihren Daten schön und rund ist, wie 60 ist. Versuchen Sie herauszufinden, ob das Problem weiterhin besteht, wenn die maximale Anzahl 61, 62 usw. beträgt. Ich schlage daher vor, dass Sie Ihre Daten kochen, damit keine derartigen Probleme auftreten. Wenn Data-Cooking keine Option ist, versuchen Sie, den maximalen Tick auf der y-Achse explizit zu definieren, sodass er nur ein wenig über der maximalen Anzahl in den Daten liegt. In Ihrem Fall, versuchen Sie dies mit:

yAxes: [{ 
    display: false, 
    ticks: { 
     max: 62 
    } 
}] 

So müssen Sie die maximale Anzahl der Daten zu berechnen und etwas klein, um hinzuzufügen, um explizit eine maximale Zecke zu definieren, die von der unerwarteten Zuschneiden loszuwerden. Jemand könnte ein besseres Verständnis und eine bessere Lösung haben, aber das ist die Option, die mir einfällt. Das und das Kochen Ihrer Daten natürlich.

Answer 2

Ich wurde untersucht, wie man einen Hotfix macht, um das zu lösen. Ich sah drei seltsame Verhalten:

1- Die Daten Pausen, wenn schwere Veränderungen, zum Beispiel:

[0, 10, 70, 30, 20, 12, 50, 200, 200, 200, 200, 200] 

2- Der ‚Fehler‘ immer die Hälfte der Höhe unserer border ist.

3- Dieser Fehler kann eingeführt wurde, als wir die Leitung 36 von core.layoutService.js auf der nächsten COMMIT

Ich sah zwei fremde padding Vars in der Funktion ‚Aktualisieren‘ An zweiter Stelle geändert des Kerns. layoutService:

Um die Zeile 29 haben wir die Funktion und auf den Zeilen 35 und 36 haben wir die seltsamen vars.

Ich habe gesehen, was die Funktion mit diesem Vars macht, speziell mit YPadding. Ich konnte nichts nützliches calc mit yPadding sehen. Meiner Meinung nach ist hier das Problem. Wir behalten immer den yPadding auf 0 und IMHO war es ein Fehler, der in einer anderen Version dieser Datei HIER angewendet wurde.

Die Lösung ist das folgt und ich entwickelte das, weil die Nachfrage hinter dem Entwickler dieses Commit gelöscht die Linie ist.

dass ein HOTFIX ES, werde ich eine PR machen, und wenn es genehmigt wird, wird es die Lösung seines

Wenn Sie diesen Code anwenden werden Sie Ihre Polsterung auf dem Stil Config der Karte gesetzt wird, auch, wenn Sie Wenden Sie keine Config an, er nimmt einen Standardwert basierend auf der Diagrammhöhe.

Config Prop Beispiel:

padding: { 
    x: 5, 
    y: 4 
}, 

Sie haben den Code und die ganze Erklärung hier: https://github.com/chartjs/Chart.js/pull/3349

Answer 3

Wenn ich die Frage richtig, aktuelle Version verstanden (> 2.4) von Chart unterstützt JS padding Config Option um Diagrammlayout.

layout: { 
    padding: { 
     // Any unspecified dimensions are assumed to be 0      
     top: 25 
    } 
} 

Check here