Faire un affichage centré avec Chart.js

International Français
1

Bonjour à toutes et à tous,
Quelques recherches sur la toile ne m'ont rien donné.

Je cherche à faire un affichage centré d'une courbe, c'est-à-dire que les valeurs absolues du min et du max sont égales, mais en n'imposant pas de valeurs a priori.

Un processus me paraît possible, mais je ne sais pas le mettre en œuvre.

Cela consiste, lors du chargement des valeurs, à trouver la valeur absolue max et à l'appliquer aux valeurs min et max de l'affichage. Le code pourrait être le suivant :

              let indx = 0;
              rows.forEach(row => {
                const [value0, value1] = row.split(',');
                labels.push(indx++);
// Calcul de la valeur absolue max de value1 ; ça, je dois savoir faire
                values0.push(parseFloat(value0));
                values1.push(parseFloat(value1));
              });             
              chart1.data.labels = labels;
              chart1.data.datasets[0].data = values0;
              chart1.data.datasets[1].data = values1;
// Appliquer cette valeur aux paramètres min et max de l'affichage
              chart1.update();

Est-ce réalisable ?

Cordialement.

Pierre.

2

Ben oui exactement comme vous le dites, lors de l’extraction vous calculez le max de la valeur absolue

Un truc comme ça peut être

let indx = 0;
let maxAbsValue = 0;

rows.forEach(row => {
  const [value0, value1] = row.split(',');
  labels.push(indx++);
  values0.push(parseFloat(value0));
  values1.push(parseFloat(value1));
  
  const absValue = Math.abs(parseFloat(value1));
  if (absValue > maxAbsValue) {
    maxAbsValue = absValue;
  }
});

chart1.data.labels = labels;
chart1.data.datasets[0].data = values0;
chart1.data.datasets[1].data = values1;

// Appliquer la valeur absolue max aux limites de l'axe Y
chart1.options.scales.y = {
  min: -maxAbsValue,
  max: maxAbsValue
};

chart1.update();
3

Merci J-M-L,

C'est cette syntaxe que je n’aurais pas trouvée.

Pour autant, il faut noter scales.y1 au lieu de scales.y.

Cordialement.

Pierre

4

c'était pour voir si vous suiviez :slight_smile:

5

:wink:

6

Petit retour sur cette modification.

Apparemment, le fait de replacer les options juste avant le update, fait que les options qui avaient été définies préalablement ne sont plus prises en compte. Il faut les remettre toutes à ce dernier endroit ( on peut même les supprimer de l’endroit où elles étaient initialement). De ce fait, la modification que vous m'avez proposée :

              chart1.options.scales.y1 = {
                min: -maxAbsValue,
                max: maxAbsValue,
              };
              chart1.update();

devient :

              chart1.options.scales.y1 = {
                min: -maxAbsValue,
                max: maxAbsValue,
                display: true,
                position: 'right',
                title : {
                  display: true,
                  text: 'Courant (A)',
                }
              };
              chart1.update();

Cordialement.

Pierre.

7

effectivement, si on écrit chart1.options.scales.y1 = ... on remplace tout l'objet, donc on perd les autres attributs.

➜ au lieu de remplacer complètement l'objet vous pouvez modifier uniquement l'attribut souhaité tout en conservant les autres avec Object.assign()

Si vous faites un truc comme cela, est-ce que ça fonctionne mieux ?

Object.assign(chart1.options.scales.y1, {
  min: -maxAbsValue,
  max: maxAbsValue
});
chart1.update();

Sinon il y a aussi l'opérateur de décomposition (...) qui doit pouvoir fonctionner

chart1.options.scales.y1 = {
  ...chart1.options.scales.y1, // Conserve les propriétés existantes
  min: -maxAbsValue,
  max: maxAbsValue
};
chart1.update();

Il me semble que dans les deux cas il faut s'assurer que chart1.options.scales.y1 existe bien avant (donc il faut l'initialiser comme vous le faisiez sans doute).

8

Vos deux propositions fonctionnent correctement comme celle que j'ai proposée. :slightly_smiling_face:

Bien ces deux opérateurs Object.assign et décomposition.

Cordialement.

Pierre.

9

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.