File size: 2,139 Bytes
aef7e33 |
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 52 53 54 55 |
// Récupérez les données, les couleurs de fond, les couleurs de bordure et les étiquettes des paramètres de l'URL
var urlParams = new URLSearchParams(window.location.search);
var data = JSON.parse(decodeURIComponent(urlParams.get('data')));
var backgroundColor = JSON.parse(decodeURIComponent(urlParams.get('backgroundColor')));
var borderColor = JSON.parse(decodeURIComponent(urlParams.get('borderColor')));
var labels = JSON.parse(decodeURIComponent(urlParams.get('labels')));
// Function to initialize or update the chart with dynamic data
function initializeOrUpdateChart(data, backgroundColor, borderColor, labels) {
// Check if a chart instance exists
if (window.myChart) {
// Update the existing chart
window.myChart.data.datasets[0].data = data;
window.myChart.data.datasets[0].backgroundColor = backgroundColor;
window.myChart.data.datasets[0].borderColor = borderColor;
window.myChart.data.labels = labels;
window.myChart.update();
} else {
// Create a new chart instance
var ctx = document.getElementById('bestSellers').getContext('2d');
window.myChart = new Chart(ctx, {
type: 'doughnut',
data: {
datasets: [{
data: data,
backgroundColor: backgroundColor,
borderColor: borderColor
}],
labels: labels
},
options: {
responsive: true,
cutoutPercentage: 80,
legend: {
display: false
},
animation: {
animateScale: true,
animateRotate: true
},
plugins: {
datalabels: {
display: false,
align: 'center',
anchor: 'center'
}
}
}
});
}
}
// Initialize or update the chart when the script is loaded
initializeOrUpdateChart(data, backgroundColor, borderColor, labels);
|