76 lines
No EOL
2.1 KiB
Text
76 lines
No EOL
2.1 KiB
Text
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Diagramme Radar avec Chart.js</title>
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
</head>
|
|
<body>
|
|
<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(255,215,0,0.2)',
|
|
borderColor: 'rgb(255,215,0)',
|
|
pointBackgroundColor: 'rgb(255,215,0)',
|
|
pointBorderColor: '#fff',
|
|
pointHoverBackgroundColor: '#fff',
|
|
pointHoverBorderColor: 'rgb(255, 215, 0)',
|
|
pointStyle: 'circle',
|
|
pointRadius: 5,
|
|
pointRotation: 0,
|
|
},
|
|
]
|
|
},
|
|
options: {
|
|
plugins: {
|
|
legend: {
|
|
display: false
|
|
},
|
|
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> |