Code html pour graphique Radar

2025-08-27 15:50:36 +02:00 · 2025-08-27 15:50:36 +02:00 · ec9e9a8781
commit ec9e9a8781
parent 3714adfb83
1 changed files with 68 additions and 10 deletions
--- a/views/index.ejs
+++ b/views/index.ejs
@ -1,15 +1,73 @@
 <!DOCTYPE html>
-<html>
+<html lang="fr">
 <head>
-  <title>Accueil</title>
+    <meta charset="UTF-8">
+    <title>Diagramme Radar avec Chart.js</title>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
 </head>
 <body>
-  <% if (user) { %>
-    <h1>Bienvenue, <%= user.username %>!</h1>
-    <a href="/logout">Déconnexion</a>
-  <% } else { %>
-    <h1>Bienvenue sur Resto-EPI</h1>
-    <a href="/auth/discord">Connexion/Inscription via Discord</a>
-  <% } %>
+    <div style="width: 35%; margin: 0 auto;">
+        <canvas id="radarChart"></canvas>
+    </div>
+
+    <script>
+        const ctx = document.getElementById('radarChart').getContext('2d');
+const radarChart = new Chart(ctx, {
+    type: 'radar',
+    data: {
+        labels: ['Qualité des plats', 'Ambiance', 'Accessibilité', 'Service', 'Tradition'],
+        datasets: [
+            {
+                label: 'Moyenne des notes',
+                data: [4.7, 4.6, 4.4, 4.3, 4.8],
+                fill: true,
+                backgroundColor: 'rgba(25, 80, 233, 0.2)',
+                borderColor: 'rgb(25, 80, 233, 10)',
+                pointBackgroundColor: 'rgb(255, 99, 132)',
+                pointBorderColor: '#fff',
+                pointHoverBackgroundColor: '#fff',
+                pointHoverBorderColor: 'rgb(255, 99, 132)',
+                pointStyle: 'circle',
+                pointRadius: 5,
+                pointRotation: 0,
+            },
+        ]
+    },
+    options: {
+        plugins: {
+            tooltip: {
+                callbacks: {
+                    label: function(context) {
+                        let label = context.dataset.label || '';
+                        if (label) {
+                            label += ': ';
+                        }
+                        label += context.formattedValue;
+                        return label;
+                    }
+                }
+            }
+        },
+        scales: {
+            r: {
+                max: 5,
+                min: 0,
+                ticks: {
+                    stepSize: 1,
+                    callback: function(value, index, values) {
+                        return value.toFixed(1);
+                    }
+                }
+            }
+        },
+        elements: {
+            line: {
+                borderWidth: 3
+            }
+        }
+    }
+});
+
+    </script>
 </body>
 </html>