Outils pour utilisateurs

Outils du site


informatique:javascript:chartjs

Ceci est une ancienne révision du document !


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

Sauf mention contraire, le contenu de ce wiki est placé sous les termes de la licence suivante : CC0 1.0 Universal
CC0 1.0 Universal Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki