it-swarm.com.de

Diagramme von Diagramme werden nicht auf die Leinwandgröße skaliert

Ich versuche, eine Grafik mit Charts.js zu erstellen (das aktuelle ist nur ein wirklich einfaches Beispiel. Ich versuche zu arbeiten, etwas aus der Chart.js-Dokumentation) und die Grafik skaliert nicht auf die Größe der Leinwand Ich gebe es. Hier ist der relevante Code. 

Um es zu importieren:

<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="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 in stats_tab.js habe ich 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: {
        }
    });
}

Die Grafik wird schön dargestellt, sie skaliert jedoch nicht auf die Größe der von mir angegebenen Leinwand. Es gibt auch keine relevanten CSS für die beteiligten Divs. Die Inspect-Funktion auf Chrome lässt mich wissen, dass der endgültige Graph 676 x 676 anstelle des von mir angegebenen 200 x 200 ist. Nicht wirklich sicher, was los ist.

Vielen Dank!

25
antonin_scalia

Die width- und height -Eigenschaft, die Sie für die Zeichenfläche festlegen, funktioniert nur, wenn der Reaktionsmodus von Chartjs "false" ist (standardmäßig "true"). Ändern Sie Ihre stats_tab.js in dieses 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
            }
        });
    }
40
Duc Vu Nguyen

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 das Verhältnis 1: 1. Wenn Ihr HTML-Inhalt also 676 Pixel breit ist, wird Ihr Diagramm 676 * 675px sein
Das kann einige häufige Fehler erklären. 

Sie können diese Funktion deaktivieren, indem Sie maintainAspectRatio auf false setzen.

25
Opsse

Setzen Sie in Ihren Optionen die Variable maintainAspectRatio auf false und responsive auf true. Zunächst wird versucht, das Diagramm an die Abmessungen der Leinwand anzupassen. Wenn die Leinwand nicht auf den Bildschirm passt, d. H. Auf Handys, wird Ihr Diagramm neu skaliert, damit es auf die Seite passt. 

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,
        }
    });
}

Das sollte funktionieren. Grundsätzlich fügen Sie Ihrem Javascript einfach die Eigenschaften width und height hinzu:

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

Referenz: Chart.js Leinwandgröße ändern

3
Timothy Chen

Wenn Ihr <canvas>-Element keine width & aheight " attribute " (nicht das css-Attribut) hat. Stellen Sie jede von ihnen auf 1 (Da es nur ein Verhältnis) ist.

<canvas id="activeUsersPieChart" width="1" height="1"></canvas>
1

Etwas spät zur Party, aber ich habe mit diesem Problem viel zu kämpfen, insbesondere auf einer Seite mit mehreren Diagrammen.

Dieser kleine Leckerbissen hat alles gelöst - meine Charts 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 (The 8px ist persönliche Präferenz. Ändern Sie ggf.).

<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>
1
Darryn Frost

Das eigentliche Problem ist, dass die Leinwand in Abhängigkeit von ihrem übergeordneten Element neu skaliert wird. Ich wollte die Reaktionsfähigkeit beibehalten. So etwas wird das Problem lösen:

<div style="width:50%">
    <canvas id="myChart"></canvas>
</div>
1
Sharpiro

Das Folgende funktionierte für mich und ich konnte die Reaktionsfähigkeit des Charts beibehalten!

  var ctxx = document.getElementById("myChart");
  ctxx.height = 80;
1

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 der Container passt.
  2. Für den Optionswert responsive festlegen: true & maintainAspectRatio: false. Dadurch wird sichergestellt, dass das Diagramm auf Größenaktualisierungen 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 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, sodass die Größe dieses Containers unabhängig von der Größe der Zeichenfläche ausgefüllt wird.

0
Ryan Forte