Das Charts.js-Diagramm wird nicht auf die Leinwandgröße skaliert

Ich versuche, ein Diagramm mit Charts.js zu erstellen (das aktuelle ist nur ein wirklich einfaches Beispiel, das ich versuche, zum Laufen zu bringen, etwas aus der Chart.js-Dokumentation) und das Diagramm wird nicht auf die Größe von skaliert Leinwand, die ich gebe. Hier ist der gesamte relevante Code.

So importieren Sie es:

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

Dann verbinde ich es wie folgt mit einer Javascript-Datei:

<script type="text/javascript" src="https://stackoverflow.com/questions/38512001/js/stats_tab.js"></script>

Ich habe meine Leinwand eingerichtet:

        <div id="graph_2015" class ="stats_box">
            <h4>Graph 2015</h4>
            Text
            <canvas id="myChart" width="200" height="200"></canvas>
        </div>

Und schließlich habe ich in stats_tab.js den folgenden Code:

window.onload=function(){
    var ctx = document.getElementById("myChart").getContext("2d");
    var myChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: [1,2,3,4,5,6,7,8,9,10],
            datasets: [
                {
                    label: "My First dataset",
                    data: [1,2,3,2,1,2,3,4,5,4]
                }
            ]
        },
        options: {
        }
    });
}

Das Diagramm wird gut angezeigt, aber es weigert sich, auf die Größe der Leinwand zu skalieren, die ich ihm gegeben habe. Es gibt auch kein CSS, das für eines der beteiligten Divs relevant ist. Die Inspektionsfunktion in Chrome lässt mich wissen, dass das endgültige Diagramm 676 x 676 statt der von mir angegebenen 200 x 200 ist. Nicht wirklich sicher, was los ist.

Vielen Dank!

Die Breiten- und Höheneigenschaften, die Sie für die Zeichenfläche festlegen, funktionieren nur, wenn der Reaktionsmodus von Chartjs auf „false“ gesetzt ist (was standardmäßig „true“ ist). Ändern Sie Ihre stats_tab.js in diese und es wird funktionieren.

    window.onload=function(){
        var ctx = document.getElementById("myChart").getContext("2d");
        var myChart = new Chart(ctx, {
            type: 'line',
            data: {
                labels: [1,2,3,4,5,6,7,8,9,10],
                datasets: [
                    {
                        label: "My First dataset",
                        data: [1,2,3,2,1,2,3,4,5,4]
                    }
                ]
            },
            options: {
                responsive: false
            }
        });
    }

Der wichtige Punkt ist: width und height Eigenschaften sind nicht die Größe in px, sondern das Verhältnis.

<canvas id="myChart" width="400" height="400"></canvas>

In diesem Beispiel ist es ein Verhältnis von 1:1. Wenn Ihr HTML-Contenair also 676 px breit ist, dann ist Ihr Diagramm 676 * 675 px groß
Das kann einige häufige Fehler erklären.

Sie können diese Funktion durch Einstellung deaktivieren maintainAspectRatio zu falsch.

Stellen Sie in Ihren Optionen die maintainAspectRatio zu falseund responsive zu true. Dadurch wird zunächst versucht, Ihr Diagramm so zu skalieren, dass es den Abmessungen Ihrer Leinwand entspricht. Wenn die Leinwand nicht auf den Bildschirm passt, z. B. auf Mobilgeräten, wird Ihr Diagramm neu skaliert, um auf die Seite zu passen.

window.onload=function(){
    var ctx = document.getElementById("myChart").getContext("2d");
    var myChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: [1,2,3,4,5,6,7,8,9,10],
            datasets: [
                {
                    label: "My First dataset",
                    data: [1,2,3,2,1,2,3,4,5,4]
                }
            ]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
        }
    });
}

Ich hatte genau das gleiche Problem, bei dem die Größe meines Diagramms nicht richtig geändert wurde. Um dieses Problem zu umgehen, habe ich zwei Dinge getan.

1. Stellen Sie den Canvas-Tag-Stil auf eine Breite und Höhe von 100 % ein. Dadurch wird sichergestellt, dass es immer zu 100 % in die Breite und Höhe des Behälters passt.
2. Für den Optionswert set responsive: true & MaintainAspectRatio: false. Dadurch wird sichergestellt, dass das Diagramm auf Größenänderungen reagiert, während das Seitenverhältnis ignoriert wird.

Unten ist der Code, den ich verwendet habe:

    css
    #myGraph {
    width: 100%;
    height: 100%;
    }

    html
    <canvas id="myGraph" />

Wenn Sie das Diagramm mit dem ctx initialisieren, stellen Sie die Optionen wie folgt ein:

     options: {
                responsive: true,
                maintainAspectRatio: false
              }

Wenn Sie jetzt die Größe Ihres Bildschirms ändern, sollte sich die Größe des Diagramms entsprechend ändern. Hinweis: Das Diagramm füllt jetzt die Größe seines Containers aus, sodass alles, was Sie Ihre Leinwand hineinlegen, die Größe dieses Containers ausfüllt.

Etwas spät zur Party, aber ich hatte viel mit diesem Problem zu kämpfen, besonders auf einer Seite mit mehreren Charts.

Dieser kleine Leckerbissen hat alles gelöst – meine Diagramme passen jetzt alle gut und passen ihre Größe genau an die Divs an, in denen sie sich befinden.

Fügen Sie dies zu Ihren Seitenstilen hinzu (Die 8px ist eine persönliche Präferenz. Ändern Sie sie bei Bedarf):

<style type="text/css">
    #canvas-holder {
        background-color: #FFFFFF;
        position: absolute;
        top: 8px;
        left: 8px;
        right: 8px;
        bottom: 8px;
    }
</style>

Für die entsprechenden Divs:

<div id="canvas-holder">
    <canvas id="chart-area"></canvas>
</div>

Dies sollte arbeiten. Fügen Sie einfach die Breiten- und Höheneigenschaften zu Ihrem Javascript hinzu:

var ctx = document.getElementById("myChart").getContext("2d");
ctx.canvas.width = 200;
ctx.canvas.height = 200;
var myChart = new Chart(ctx,.........

Referenz: Leinwandgröße von Chart.js ändern

Der folgende Code aus der Chart.js-Dokumentation hat für mich funktioniert. “https://www.chartjs.org/docs/latest/general/responsive.html“

var ctx = document.getElementById('myChart').getContext('2d');
ctx.canvas.parentNode.style.width = "500px";
ctx.canvas.parentNode.style.height = "500px";
var myChart = new Chart(ctx, .....