J'utilise Chart.js avec un graphique à courbes simple, mais les propriétés de largeur et de hauteur calculées par Chart.js semblent être basées sur la largeur et la hauteur totales de l'élément parent sans tenir compte du remplissage.
var options = {
maintainAspectRatio: false,
responsive: true
};
var data = {
labels: ["", "", "", "", "", "", ""],
datasets: [
{
label: "My First dataset",
fillColor: "rgba(220,220,220,0.2)",
strokeColor: "rgba(220,220,220,1)",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
data: [65, 59, 80, 81, 56, 55, 40]
},
{
label: "My Second dataset",
fillColor: "rgba(151,187,205,0.2)",
strokeColor: "rgba(151,187,205,1)",
pointColor: "rgba(151,187,205,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(151,187,205,1)",
data: [28, 48, 40, 19, 86, 27, 90]
}
]
};
var ctx1 = document.getElementById("mychart1").getContext("2d");
var myNewChart = new Chart(ctx1).Line(data, options);
.container {
padding: 15px 15px 15px 15px;
width: 300px;
height: 200px;
border: 1px solid black;
}
.child {
display: inline-block;
border: 1px solid red;
width:100%;
height:100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.1.1/Chart.js"></script>
<div class='container'>
<canvas id='mychart1' class='child'></canvas>
</div>
<br>
<div class='container'>
<div class='child'>test</div>
</div>
Le deuxième conteneur et l'enfant montrent le comportement que j'attends. Est-ce un bug avec la façon dont Chart.js calcule la largeur et la hauteur de la toile ou est-ce que je fais une erreur de style?
J'avais aussi besoin d'un canevas responsive et j'avais ce problème. C'était ma solution:
<div>
<canvas id="chart"></canvas>
</div>
Étant donné que Chart.js redimensionne le canevas à la largeur du conteneur, en ignorant le remplissage, je viens juste de les envelopper dans un div
. div
est redimensionné en fonction du conteneur avec remplissage, respectant le remplissage, puis le fichier Chart.js réactif canvas
est mis à l'échelle div
.
Moi aussi j'ai cherché sur Google pour résoudre ce problème et je me suis retrouvé avec une solution simple.
J'ai ajouté height
pour qu'il ajuste automatiquement la largeur en conséquence et l'affiche mieux. Si vous voulez vraiment, vous pouvez aussi ajouter width
. L'élément canvas
fait partie de HTML5
.
Il ne vous permet pas de saisir des valeurs avec px
. Donc ignorez cela et tapez simplement la valeur numérique dont vous avez besoin.
<canvas id="myChart" height="80"></canvas>
Une meilleure solution consiste à utiliser .container {box-sizing: border-box;}
Dans votre exemple jsfiddle, définissez l'attribut responsive
sur false:
var options = {
maintainAspectRatio: true,
responsive: false
};
Le paramètre précédent ajoutait 30 pixels supplémentaires à la hauteur et à la largeur lorsque vous inspectez l'élément à l'aide des outils de développement de Chrome. En raison de la taille de la toile, le redimensionnement de la toile ne devrait pas poser de problèmes.
J'ai enveloppé le dans et ensuite utilisé ce CSS.
.chart-container {
box-sizing:border-box;
margin:2%;
width:96%;
}
Cela le garde bien rembourré et réactif. J'ai utilisé 2% mais vous pouvez utiliser le pourcentage qui convient à votre mise en page.