Ich versuche, ein Diagramm mit Charts.js zu erstellen (das aktuelle ist nur ein wirklich einfaches Beispiel, das ich versuche zu arbeiten, etwas aus der Chart.js -Dokumentation entnommen) und das Diagramm skaliert nicht auf Größe der Leinwand Ich gebe es. Hier ist der relevante Code.
Um es zu importieren:
%Vor%Dann verbinde ich es wie folgt mit einer Javascript-Datei:
%Vor%Ich habe meine Leinwand eingerichtet:
%Vor%Und dann endlich in stats_tab.js, ich habe den folgenden Code:
%Vor%Die Grafik wird gut angezeigt, aber sie lehnt die Skalierung auf die Größe der Leinwand ab, die ich ihr gegeben habe. Es gibt auch keine CSS, die für die beteiligten Divs relevant ist. Die inspect-Funktion in Chrome lässt mich wissen, dass der endgültige Graph 676 x 676 statt 200 x 200 ist. Nicht wirklich sicher, was vor sich geht.
Danke!
Die Eigenschaft width und height, die Sie für den Canvas-Bereich festlegen, funktioniert nur, wenn der Responsive-Modus des Chartjs falsch ist (was standardmäßig der Fall ist). Ändern Sie Ihre stats_tab.js in diese und es wird funktionieren.
%Vor% Der wichtige Punkt ist: width und height Eigenschaften sind nicht die Größe in px, sondern das Verhältnis.
In diesem Beispiel ist es ein Verhältnis von 1: 1. Also, wenn Ihre HTML Contenair 676 px Breite ist, dann wird Ihr Diagramm 676 * 675px
Das kann einige häufige Fehler erklären.
Sie können diese Funktion deaktivieren, indem Sie maintainAspectRatio auf false setzen.
Das sollte funktionieren . Fügen Sie Ihrem Javascript einfach die Eigenschaften width und height hinzu:
%Vor%Referenz: Chart.js Leinwandgröße ändern
Tags und Links javascript canvas charts chart.js