Taille du canvas

**Eckmül** · 13/08/2021, 12h17

Bonjour,

Je n'arrive tout simplement pas à régler la taille du canvas pour un élément graphique implémenté avec chart.js. J'ai déjà cherché plusieurs solutions :

- définir la taille dans la balise HTML ]<canvas id="graph" width="50" height="50"></canvas>, définir dans le JS avec plusieurs lignes possible que j'ai trouvé ici graph.height = 100; graph.height(100);.

Rien ne fonctionne, je ne comprends vraiment pas comment changer cette taille de canvas. Si l'un de vous a la solution miracle, parce que je désespère un peu là. merci d'avance !

PS : Je vous mets aussi mon code en simplifié pour que vous puissiez observer :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
]
<!DOCTYPE html>
  <html>
    <head>
      <title>Test</title>
      <!-- Fichier JQuery -->
      <script src="../../../js/JQuery/jquery-3.6.0.min.js"></script>
      <!-- Lien chart.js -->
      <script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.min.js"></script>
 
    </head>
 
    <body>
 
      <div id='data 1' class='data'>145</div>
      <div id='data 2' class='data'>45</div>
      <div id='data 3' class='data'>144</div>
      <div id='data 4' class='data'>12</div>
      <div id='data 5' class='data'>436</div>
      <div id='data 6' class='data'>43</div>
 
      <canvas id="graph" width="50" height="50"></canvas>
    </body>
 
  <script src="js/stat.js"></script>
 
</html>

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
// graphique
var graph = document.getElementById('graph').getContext('2d');
 
graph.height = 100;
graph.height(100);
 
// définition des data
var listData = document.getElementsByClassName("data");
var data = [];
var legend = [];
for (let count = 0; count < listData.length; count++) {
    data.push(listData[count].innerHTML);
    legend.push(listData[count].id);
}
 
// paramétrage du graphe
var graph = new Chart(graph, {
    type: 'bar',
    data: {
        labels: legend,
        datasets: [{
            label: 'nombre d\'élements avec ce code symbologique',
            data: data,
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        maintainAspectRatio: false,
        scales: {
            y: {
                beginAtZero: true
            }
        }
    }
});

**mathieu** · 13/08/2021, 18h35

chart.js est une bibliothèque vraiment très intéressant quand on arrive a passer cette 1re étape de la définition de la taille.
voilà ce que je fais d'habitude :

d'abord je fixe les proportions dans la balise "canva" comme cela : <canvas id="c1" width="400" height="200"></canvas>. là par exemple la zone sera 2 fois plus large que haute donc ça donnerai le même résultat avec "width=24 height=12".
ensuite je l'entoure avec une balise "div" dont je définis la taille en css.

**Eckmül** · 16/08/2021, 09h50

Ok, merci Mathieu pour ta réponse. J'ai pu régler mon soucis

Taille du canvas [Chart.js]

Bibliothèques & Frameworks

Discussions similaires

Partager

Partager