Breite und Höhe einstellen

85

Ich probiere den Beispielcode für Chart.js aus , der in den Dokumenten angegeben ist .

Breite und Höhe werden inline auf dem Canvas-Element mit 400px / 400px angegeben.

Beim Rendern des Diagramms wird es jedoch auf die volle Seitenbreite vergrößert und das rechte Ende abgeschnitten.

Siehe Beispiel

Wie / wo soll ich die Breite / Höhe des Diagramms steuern?

This is some bogus text because SO prohibits linking to Codepen otherwise.
chart.js Fremder
quelle

Antworten:

89

Sie können die Breite des Canvas-Stils überschreiben! Wichtig ...

canvas{

  width:1000px !important;
  height:600px !important;

}

ebenfalls

Geben Sie die responsive:true,Eigenschaft unter Optionen an.

options: {
    responsive: true,
    maintainAspectRatio: false,
    scales: {
        yAxes: [{
            ticks: {
                beginAtZero:true
            }
        }]
    }
}

Update unter Optionen hinzugefügt: maintainAspectRatio: false,

Link: http://codepen.io/theConstructor/pen/KMpqvo

KpTheConstructor
quelle
11
Vielen Dank, Sie maintainAspectRatio: falsehaben das Diagramm sichtbar gemacht. Aber immer noch die rechte Seite abschneiden. Wenn ich diese Art von Problemen bereits mit ihrem eigenen grundlegenden Beispielcode treffe, frage ich mich, ob chart.js eine gute Wahl ist. (Die rechte Seite ist noch abgeschnitten ...)
Fellow Stranger
Damit ist das Problem der Diagrammgröße gelöst. Das Diagramm wurde nicht entsprechend skaliert. Gibt es eine Möglichkeit, die Diagrammgröße in Chart.js festzulegen?
Firix
7
Es stellt sich heraus, dass Sie die Reaktion deaktivieren müssen, damit das Diagramm den angegebenen Größen entspricht. Schade, dass es keinen Weg gibt, es zu kontrollieren und die Reaktionsfähigkeit aufrechtzuerhalten ...
Firix
2
Vielen Dank. Ihr maintainAspectRatiohilft mir wirklich.
Arsman Ahmad
Die Verwendung von "! Important" ist nicht der richtige Weg, um dies zu lösen, obwohl es funktioniert. Die @ Nicolas-Lösung unter "Einwickeln der Zeichenfläche in ein Div" ist eine bessere Möglichkeit, da wir die Größe der Zeichenfläche so steuern können, wie wir es möchten.
Abhishek Boorugu
52

Sie können das Diagramm auch einfach mit einem Container umgeben (laut offiziellem Dokument http://www.chartjs.org/docs/latest/general/responsive.html#important-note ).

<div class="chart-container">
    <canvas id="myCanvas"></canvas>
</div>

CSS

.chart-container {
    width: 1000px;
    height:600px
}

und mit Optionen

responsive:true
maintainAspectRatio: false
Nicolas
quelle
1
Das funktioniert. Der Schlüssel hier ist, ein äußeres Div zu verwenden und die Breite und Höhe auf diesem und nicht auf dem Canvas-Element festzulegen.
John Doherty
Damit dies funktioniert, sollte der Kartencontainer relativ positioniert sein.
Sanju
funktioniert für mich aber nur mit !importantin Angular Projekt
29ртур Гудиев
22

In meinem Fall responsive: falselöste das Übergeben von Optionen das Problem. Ich bin mir nicht sicher, warum jeder Ihnen sagt, dass Sie das Gegenteil tun sollen, zumal true die Standardeinstellung ist.

Antimon
quelle
1
Hier gilt das gleiche. Durch die Einstellung wurde responsive: truedas Erscheinungsbild des Diagramms vollständig verzerrt.
Paul
funktioniert für mich aber nur mit !importantin meinem Angular Projekt
Артур Гудиев
2

Funktioniert auch bei mir

responsive:true
maintainAspectRatio: false


<div class="row">
        <div class="col-xs-12">
            <canvas id="mycanvas" width="500" height="300"></canvas>
        </div>
    </div>

Vielen Dank

subramanya46
quelle
2

Ich kann nicht glauben, dass niemand über die Verwendung eines relativen übergeordneten Elements gesprochen hat.

Code: 

<div class="chart-container" style="position: relative; height:40vh; width:80vw">
  <canvas id="chart"></canvas>
</div>

Quellen: Offizielle Dokumentation

R. Gurung
quelle
0

Nicht oben erwähnt, aber die Verwendung von max-widthoder max-heightauf dem Canvas-Element ist ebenfalls möglich.

Ukuser32
quelle
0

Das Folgende hat bei mir funktioniert - aber vergessen Sie nicht, dies in den Parameter "Optionen" aufzunehmen. 

var myChart = new Chart(ctx, {
type: 'line',
data: data,
options: {
    maintainAspectRatio: false,
    responsive:true,
    scales: {
        yAxes: [{
            ticks: {
                beginAtZero: true
            }
        }]
    }
}
});
Dazeh
quelle
0

Dies hat in meinem Fall geholfen:

options: {
    responsive: true,
    scales: {
        yAxes: [{
            display: true,
            ticks: {
                min:0,
                max:100
            }
        }]
    }
}
Omid N.
quelle
-3

Verwenden Sie dies, es funktioniert gut.

<canvas id="totalschart" style="height:400px;width: content-box;"></canvas>

und unter options,

responsive:true,
Udara
quelle