web-dev-qa-db-fra.com

Le graphique Charts.js n'est pas redimensionné à la taille de la toile

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!

javascriptcanvaschartschart.js
25
antonin_scalia

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
            }
        });
    }
40
Duc Vu Nguyen

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.

25
Opsse

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,
        }
    });
}
5
Kurt Van den Branden

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

3
Timothy Chen

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>
1
Mohd Abdul Mujib

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>
1
Darryn Frost

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>
1
Sharpiro

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;
1
Joshua Schlichting