kann nicht ChartJS Canvas Breite setzen

Question

Ich kann ChartJS nicht auf 200px beschränken. Es nimmt die gesamte Breite des Browsers ein. Was vermisse ich.

ich folgendes CDN bin mit

<div id="pnlChart" style="height:200px" > 
    <canvas id="myChart" width="400" height="200" class="chart" ></canvas> 
</div> 

meine Daten, die vom Server zurückgegeben werden erscheinen gut geformt und richtig das Diagramm zeichnen zu werden. Es hat nicht die Breite/Höhe in ihm. (Ich habe das aus den Dev Tools von Chrome gezogen.

{"type": "line", "labels": [0,2,6,7,8,9,10,11,12,13,14, 1,3,4,5,15,16,17,18,19,20,21,22,23], "Datasets": [{"label": "Data", "data": [2,1 8,36,119,179,214,165,87,173,220,0,0,0,0,0,0,0,0,0,0,0,0,0]}}}

Answer 1

Sie sollten in der Lage sein, diese Containerbreitenfüllung zu deaktivieren Verhalten von Chart.js sagen nicht ansprechbar Modus zu verwenden Versuchen Sie, diese in die globale Konfiguration des Diagramms vorbei (die höchste Stufe der Optionen).

options: { 
    responsive: false 
} 

the Chart.js documentation Siehe zum Beispiel, wie dies die volle Definition passt in eines ch Kunst.

Wenn das aus irgendeinem Grund nicht funktioniert, können Sie stattdessen die Breite des div Elements, das die canvas enthält, auf der Ihr Diagramm gezeichnet wird, begrenzen. Basierend auf Ihrem Beispiel Sie diese zu Ihrem CSS hinzufügen könnte:

div#pnlChart {width: 200px} 

Auch wenn Sie eine dieser Methoden erhalten können zu arbeiten, im Idealfall wollen Sie nicht in diesen Tagen Fixbreiten für Elemente seiner Angabe, weil sie es macht schwieriger für Seiten, die gut auf den unzähligen Geräten angezeigt werden, die jetzt verwendet werden.

Es ist viel besser, ein ansprechendes Layout für Ihre Website zu entwickeln, das sich an jede Bildschirmbreite anpasst, von kleinen Smartphones bis hin zu großen Desktop-Monitoren. Suchen Sie online nach Leitfäden zum Thema "Responsive Design" für Artikel zu diesem Thema.