Warum berücksichtigt chart.js den Inhalt des Containerelements nicht?

Question

Ich verwende Chart.js mit einem einfachen Liniendiagramm, aber die von Chart.js berechneten Eigenschaften für Breite und Höhe scheinen auf der Gesamtbreite und -höhe des übergeordneten Elements zu basieren, das das Padding ignoriert.

var options = { 
 
    maintainAspectRatio: false, 
 
    responsive: true 
 
}; 
 

 
var data = { 
 
    labels: ["", "", "", "", "", "", ""], 
 
    datasets: [ 
 
     { 
 
      label: "My First dataset", 
 
      fillColor: "rgba(220,220,220,0.2)", 
 
      strokeColor: "rgba(220,220,220,1)", 
 
      pointColor: "rgba(220,220,220,1)", 
 
      pointStrokeColor: "#fff", 
 
      pointHighlightFill: "#fff", 
 
      pointHighlightStroke: "rgba(220,220,220,1)", 
 
      data: [65, 59, 80, 81, 56, 55, 40] 
 
     }, 
 
     { 
 
      label: "My Second dataset", 
 
      fillColor: "rgba(151,187,205,0.2)", 
 
      strokeColor: "rgba(151,187,205,1)", 
 
      pointColor: "rgba(151,187,205,1)", 
 
      pointStrokeColor: "#fff", 
 
      pointHighlightFill: "#fff", 
 
      pointHighlightStroke: "rgba(151,187,205,1)", 
 
      data: [28, 48, 40, 19, 86, 27, 90] 
 
     } 
 
    ] 
 
}; 
 

 
var ctx1 = document.getElementById("mychart1").getContext("2d"); 
 
var myNewChart = new Chart(ctx1).Line(data, options);

.container { 
 
    padding: 15px 15px 15px 15px; 
 
    width: 300px; 
 
    height: 200px; 
 
    border: 1px solid black; 
 
} 
 

 
.child { 
 
    display: inline-block; 
 
    border: 1px solid red; 
 
    width:100%; 
 
    height:100%; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.1.1/Chart.js"></script> 
 

 

 
<div class='container'> 
 
    <canvas id='mychart1' class='child'></canvas> 
 
</div> 
 
<br> 
 
<div class='container'> 
 
    <div class='child'>test</div> 
 
</div>

JSFiddle

Der zweite Behälter und Kind zeigt das Verhalten ich erwarte. Ist dies ein Fehler bei der Berechnung der Breite und Höhe der Zeichenfläche durch Chart.js oder mache ich einen Fehler beim Formatieren?

Answer 1

ich brauchte auch eine ansprechende Leinwand und hatte dieses Problem. Das war mein fix:

<div> 
    <canvas id="chart"></canvas> 
</div> 

Seit Chart.js die Leinwand auf die Breite des Behälters skaliert, die Polsterung zu ignorieren, wickelte ich nur die Leinwand in einem div. Die div skaliert auf den Container mit Auffüllen, unter Berücksichtigung der Auffüllung, und dann reagiert die reaktionsfähige Chart.js canvas auf die div.

Answer 2

In Ihrem jsfiddle Beispiel das responsive Attribut auf false ändern:

var options = { 
    maintainAspectRatio: true, 
    responsive: false 
}; 

Die vorherige Einstellung eine zusätzliche 30px sowohl hinzugefügt, um die Höhe und Breite, wenn Sie das Element mit Chrome Entwickler-Tool untersuchen. Aufgrund der Größe der Leinwand sollte es bei der Größenanpassung der Leinwand nicht problematisch sein.

JSFIDDLE EXAMPLE

Answer 3

„Wenn Sie zum Beispiel alle Diagramme erstellt wollte ansprechbar sein, und die Größe, wenn das Browserfenster der Fall ist, kann die folgende Einstellung geändert werden:“

Chart.defaults.global.responsive = true;

„Jetzt, jedes Mal, wenn wir schaffen Ein Diagramm, options.responsive wird wahr sein. "

Quelle: http://www.chartjs.org/docs/

Answer 4

Eine bessere Lösung ist die Verwendung .container {box-sizing: border-box;}

Answer 5

ich für dieses Problem zu googeln und endete mit einer einfachen Lösung auf.

Ich habe hinzugefügt height, so dass es automatisch die Breite entsprechend anpassen und es auf eine schönere Weise zeigen. Wenn Sie wirklich wollen, könnten Sie auch width hinzufügen. Das canvas Element ist Teil von HTML5.

Sie können keine Werte mit px eingeben. Also ignoriere das und gib einfach den numerischen Wert ein, den du brauchst.

<canvas id="myChart" height="80"></canvas> 

Answer 6

Ich wickelte die in und dann dieses CSS verwendet.

.chart-container { 
    box-sizing:border-box; 
    margin:2%; 
    width:96%; 
} 

Dies hält es von den Kanten gepolstert und reagiert. Ich habe 2% verwendet, aber Sie können die Prozentsätze verwenden, die Ihrem Layout entsprechen.