web-dev-qa-db-fra.com

Réglage de la largeur et de la hauteur

J'essaie l'exemple de code pour Chart.js donné dans la documentation .

La largeur et la hauteur sont spécifiées en ligne sur l'élément de structure à 400px/400px.

Mais lors du rendu du graphique, il est agrandi de toute la page et coupe l'extrémité la plus à droite.

voir exemple

Comment/où suis-je censé contrôler la largeur/hauteur du graphique?

This is some bogus text because SO prohibits linking to Codepen otherwise.
chart.js
48
Fellow Stranger

Vous pouvez remplacer la largeur du style de la toile! Important ...

canvas{

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

}

aussi

spécifiez la propriété responsive:true, sous options ..

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

mise à jour sous les options ajoutées: maintainAspectRatio: false,

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

61
KpTheConstructor

Vous pouvez également simplement entourer la carte d'un conteneur (selon la documentation officielle 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
}

et avec des options

responsive:true
maintainAspectRatio: false
25
Nicolas

Dans mon cas, passer responsive: false sous les options a résolu le problème. Je ne suis pas sûr pourquoi tout le monde vous dit de faire le contraire, d'autant plus que true est la valeur par défaut.

10
Antimony

Travaille pour moi

responsive:true
maintainAspectRatio: false

Je vous remercie

3
sumit

Travaille pour moi aussi

responsive:true
maintainAspectRatio: false


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

Merci

1
subramanya4

Cela n'est pas mentionné ci-dessus, mais l'utilisation de max-width ou max-height sur l'élément de canevas est également une possibilité.

0
Ukuser32