web-dev-qa-db-fra.com

Pourquoi la toile chart.js ne respecte-t-elle pas le remplissage de l'élément conteneur?

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>

JSFiddle

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?

javascripthtmlcsscanvaschart.js
27
Hawk

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.

51
gwg

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>
4
Dulith De Costa

Une meilleure solution consiste à utiliser .container {box-sizing: border-box;}

3
Angie

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.

Exemple JSFIDDLE

2
Conrad Lotz

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.

0
chris22smith