Charts.js Grafik nicht auf canvas-Größe skalieren

Ich versuche, mich ein graph mit Charts.js (aktuelle ist nur eine wirklich einfache Beispiel, das ich versuche, zu arbeiten, etwas überrascht, von der Chart.js Dokumentation) und die Grafik ist nicht die Skalierung, um die Größe der Leinwand bin ich, es zu geben. Hier finden Sie alle relevanten code.

Importieren:

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

Dann, ich schließen Sie es an eine javascript-Datei wie folgt:

<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 dann endlich in stats_tab.js ich habe den folgenden code ein:

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 zeigt sehr schön, aber es weigert sich, zu skalieren, um die Größe der Leinwand, die ich ihm gab. Es ist auch kein css-relevant für alle der divs beteiligt. Die inspect-Funktion in chrome lässt mich wissen, dass der Letzte graph ist 676 von 676 anstelle der 200 von 200 I angegeben. Nicht wirklich sicher, was Los ist.

Dank!

InformationsquelleAutor der Frage antonin_scalia | 2016-07-21

  1. 35

    Die width-und height-Eigenschaft, die Sie für die Leinwand nur funktionieren, wenn die Chartjs' responsive mode ist false (Standardwert ist true). Ändern Sie Ihre stats_tab.js 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
            }
        });
    }

    InformationsquelleAutor der Antwort Duc Vu Nguyen

  2. 18

    Ist der wichtigste Punkt: width und height Eigenschaften sind nicht die Größe in px, aber das Verhältnis.

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

    In diesem Beispiel, es ist eine 1:1-Verhältnis. Also, wenn Sie Ihre html-contenair 676 px Breite und dann das Diagramm 676*675px

    Das kann erklären, einige der häufigsten Fehler.

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

    InformationsquelleAutor der Antwort Opsse

  3. 2

    Diese funktionieren sollte. Im Grunde, fügen Sie einfach die width-und height-Eigenschaften, um Ihren javascript:

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

    Referenz: Chart.js canvas resize

    InformationsquelleAutor der Antwort Timothy Chen

  4. 1

    Die folgenden arbeitete für mich, und ich war in der Lage zu halten die Reaktionsfähigkeit des Diagramms!

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

    InformationsquelleAutor der Antwort Joshua Schlichting

Schreibe einen Kommentar