Discussion :

[Kenny38510]

Bonjour,
Je suis bloqué sur Chart JS je ne comprends pas du tout mes les options que je mets (titre, légende à droite...) ne veulent pas s'appliquer et je ne comprends pas pourquoi.
Dans ma page HTML j'ai le code suivant:

Code :

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
 
<div>
        <div class="container">
            <div class="row">
              <div class="col-sm-6">
                <div class="box chart-container">
                    <canvas id="camenbert" width="400" height="100"></canvas>
                </div>
              </div>
             </div>
        </div>         
</div>
 
<style>
    .row {
        display: flex;
        align-items: stretch;
      }
    .box {
        height: 100%;
        display: flex;
        justify-content: center;
    }
    .box > * {
        align-self: center;
      }
    canvas {
        display: block;
        max-width: 600px;
        margin: 0 auto;
    }
    .chart-container {
        width: 500px;
      }
</style>

Le script JS est le suivant :

Code :

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
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js" integrity="sha512-ElRFoEQdI5Ht6kZvyzXhYG9NqjtkmlkfYk0wr6wHxU9JEHakS7UJZNeml5ALk+8IKlU6jDgMabC3vkumRokgJA==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" integrity="sha512-uto9mlQzrs59VwILcLiRYeLKPPbS/bT71da/OEBYEwcdNUk8jYIy+D176RYoop1Da+f9mvkYrmj5MCLZWEtQuA==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.fancytree/2.36.0/jquery.fancytree-all.min.js" integrity="sha512-3cdJIbQwDGx/hhpycCFfYxVy5wT6VVQG5fYVZ4Y4+eN4jlL5/flwRP63/g5fuqydj5fg9758lqW99Gp0D58NxA==" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels"></script>
 
<script>
 
    // Données pour le graphique
    var data = {
        labels: ["Type A","Type B","Type C","Type D"],
        datasets: [{
          data: ["2","174","1","107"],
          backgroundColor: ["#FFC300","#FF5733","#C70039","#900C3F","#581845"]
        }]
    };
 
    // Options du graphique
    var optionsG = {
        responsive: true,
        title: {
          display: true,
          text: 'Nombre interventions par type' // Titre du graphique
        },
        legend: {
          position: 'right' // Position de la légende à droite
        },
        plugins: {
          datalabels: {
            color: '#fff', // Couleur du texte des valeurs
            font: {
              weight: 'bold' // Poids de la police du texte des valeurs
            },
            formatter: function(value, context) {
              return value; // Affiche la valeur de chaque section
            }
          }
        }
    };
 
    // Création du graphique
    var ctx = document.getElementById('camenbert').getContext('2d');
    new Chart(ctx, {
        type: 'pie',
        options: optionsG,
        data: data,
    });
</script>

Le graphique s'affiche bien mais aucune option ne s'applique. Je dois manquer quelque chose pour arriver à avoir les options. Si quelqu'un pouvait me donner la solution ce serait super car je bloque complètement.

[mathieu]

"legend" et "title" vont dans "plugins".
vous pouvez voir ça dans les exemples là :
https://www.chartjs.org/docs/latest/...int-style.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
    var optionsG = {
        responsive: true,
        plugins: {
			legend: {
				position: 'right' // Position de la légende à droite
			},
			title: {
				display: true,
				text: 'Nombre interventions par type' // Titre du graphique
			},
			datalabels: {
				color: '#f0f', // Couleur du texte des valeurs
				font: {
					weight: 'bold' // Poids de la police du texte des valeurs
				},
				formatter: function(value, context) {
					return value; // Affiche la valeur de chaque section
				}
			}
        }
    };

[Kenny38510]

Merci Mathieu en effet à force de tests je me suis mélangé les pinceaux.
Maintenant il me reste plus qu'à voir pour l'affichage des valeurs dans les sections, mais tu m'as débloqué, merci encore.