Chart JS les options ne s'appliquent pas
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:
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:
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.
