J'essaie de créer un graphique avec Charts.js (l'actuel n'est qu'un exemple très simple que j'essaie de faire fonctionner, tiré de la documentation de Chart.js) et le graphique ne correspond pas à la taille de toile je le donne. Voici tout le code pertinent.
Pour l'importer:
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.6/Chart.bundle.min.js"></script>
Ensuite, je le connecte à un fichier javascript comme suit:
<script type="text/javascript" src="js/stats_tab.js"></script>
J'ai ma toile installée:
<div id="graph_2015" class ="stats_box">
<h4>Graph 2015</h4>
Text
<canvas id="myChart" width="200" height="200"></canvas>
</div>
Et puis finalement dans stats_tab.js, j'ai le code suivant:
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: {
}
});
}
Le graphique s’affiche bien, mais il refuse de s’adapter à la taille de la toile que je lui ai donnée. Il n'y a également aucun css pertinent pour aucun des divs impliqués. La fonction inspecter sur chrome me permet de savoir que le graphique final est 676 par 676 au lieu des 200 par 200 que j'ai spécifiés. Pas vraiment sûr de ce qui se passe.
Merci!
Les propriétés width et height que vous définissez pour l'espace de travail ne fonctionnent que si le mode réactif de Chartjs est défini sur false (ce qui est true par défaut) Changez votre stats_tab.js en ceci et cela fonctionnera.
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
}
});
}
Le point important est: les propriétés width
et height
ne sont pas la taille en px mais le rapport.
<canvas id="myChart" width="400" height="400"></canvas>
Dans cet exemple, le ratio est de 1: 1. Donc, si votre contenu HTML est 676 px largeur alors votre graphique sera 676 * 675px
Cela peut expliquer certaines erreurs courantes.
Vous pouvez désactiver cette fonctionnalité en définissant maintainAspectRatio
sur false.
Dans vos options, définissez maintainAspectRatio
sur false
et responsive
sur true
. Cela tentera d’abord d’adapter votre graphique aux dimensions de votre toile. Si le canevas ne correspond pas à l'écran, c'est-à-dire sur les mobiles, votre graphique sera redimensionné pour s'adapter à la page.
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: true,
maintainAspectRatio: false,
}
});
}
Cela devrait fonctionner. Fondamentalement, il suffit d’ajouter les propriétés width et height à votre javascript:
var ctx = document.getElementById("myChart").getContext("2d");
ctx.canvas.width = 200;
ctx.canvas.height = 200;
var myChart = new Chart(ctx,.........
Référence: Chart.js canvas redimensionner
Si votre élément <canvas>
ne possède pas width
& height
" attribut " (pas l’attribut css). Essayez de régler chacun d’eux sur 1 (Puisque c’est juste un ratio)
<canvas id="activeUsersPieChart" width="1" height="1"></canvas>
Un peu tard pour la soirée, mais j’ai beaucoup lutté contre ce problème, en particulier sur une page comportant plusieurs graphiques.
Cette petite friandise a tout résolu - mes cartes s’ajustent parfaitement et se redimensionnent exactement avec les divs dans lesquelles elles se trouvent.
Ajoutez ceci à vos styles de page (le format 8px est une préférence personnelle. Modifiez-le si nécessaire):
<style type="text/css">
#canvas-holder {
background-color: #FFFFFF;
position: absolute;
top: 8px;
left: 8px;
right: 8px;
bottom: 8px;
}
</style>
Pour les divisions appropriées:
<div id="canvas-holder">
<canvas id="chart-area"></canvas>
</div>
Le vrai problème est que la toile sera redimensionnée en fonction de son parent. Je voulais garder la réactivité. Donc, quelque chose comme ceci va résoudre le problème:
<div style="width:50%">
<canvas id="myChart"></canvas>
</div>
Ce qui suit a fonctionné pour moi et j'ai pu garder la réactivité de la carte!
var ctxx = document.getElementById("myChart");
ctxx.height = 80;