informatique:javascript:chartjs
Ceci est une ancienne révision du document !
Table des matières
Chart.js
Simple yet flexible JavaScript charting for designers & developers.
Plugins
Aligner les zéros des axes Y
/** * Plugin pour aligner les zéros des axes Y multiples dans un graphique Chart.js. * Ce plugin ajuste dynamiquement les échelles des axes Y pour que leurs zéros soient alignés, * améliorant ainsi la lisibilité des graphiques avec plusieurs axes Y. * * Fonctionnement : * 1. Calcule le ratio de zéro pour chaque axe Y (proportion de l'axe en dessous de zéro) * 2. Détermine le ratio dominant parmi tous les axes * 3. Ajuste les échelles des autres axes pour qu'ils utilisent le même ratio dominant * 4. Met à jour le graphique pour appliquer les nouvelles échelles * * Le plugin s'exécute une seule fois après la mise en page initiale du graphique * et évite les boucles infinies en utilisant un drapeau _alignZeroRunning. */ const alignZeroPlugin = { id: 'alignZero', _alignZeroRunning: false, afterLayout(chart) { if (this._alignZeroRunning) return; this._alignZeroRunning = true; const yAxes = Object.values(chart.scales).filter(s => s.axis === 'y'); if (yAxes.length < 2) return; const getZeroRatio = (min, max) => { if (min >= 0) return 0; if (max <= 0) return 1; return Math.abs(min) / (Math.abs(min) + Math.abs(max)); }; const ratios = yAxes.map(ax => getZeroRatio(ax.min, ax.max)); const dominantRatio = Math.max(...ratios); if (dominantRatio === 0 || dominantRatio === 1) return; yAxes.forEach((ax, i) => { if (getZeroRatio(ax.min, ax.max) !== dominantRatio) { const absMax = Math.max(Math.abs(ax.min), Math.abs(ax.max)); const newMin = Math.round(-absMax * (dominantRatio / (1 - dominantRatio))); const newMax = Math.round(absMax * ((1 - dominantRatio) / dominantRatio)); // Écriture dans les options pour que Chart.js en tienne compte const scaleId = ax.id; chart.options.scales[scaleId].min = ax.min < 0 ? ax.min : newMin; chart.options.scales[scaleId].max = ax.max > 0 ? ax.max : newMax; } }); // Forcer le recalcul des scales avec les nouvelles options chart.update('none'); // 'none' = pas d'animation, pas de boucle infinie this._alignZeroRunning = false; } };
informatique/javascript/chartjs.1778846825.txt.gz · Dernière modification : de cyrille
