Changer la couleur des "bubbles" dans chart.js

International Français
1

Bonsoir à toutes et à tous,

Dans un affichage avec des "bubbles" dans Chart.js, je voudrais faire varier la couleur de la bulle en fonction de ses coordonnées. J'ai trouvé cette manière de faire sur la toile, mais quoi que je fasse, cela n'agit pas du tout.

            fetch('/infoUIP') // Affichage du cos Phi
              .then(response => response.text())
              .then(data => {
                document.getElementById('PA').textContent = data;
                const [P, U, I] = data.split(',');
                let Re = parseFloat(P)/(parseFloat(U)*parseFloat(I));
                let Im = Math.sqrt(1 - Math.pow(Re, 2));
                chart0.data.datasets[0].data = [{ x: Re, y: Im, r: 10,
                backgroundColor: 'rgb(Math.trunk(Im*255), Math.trunk(Re*255), 0)', }]; // Changement de la couleur
                chart0.update();
              });

Une solution ?

Cordialement.

Pierre.

2

J'ai joué un peu avec cet exemple Bubble Chart | Chart.js
On voit que backgroundColor fonctionne si c'est un argument de data mais ne fonctionne pas si c'est un argument des points.
Il semblerait que la couleur soit globale au dataset.

Edit:
En regardant l'exemple Bar chart j'ai vu que la couleur est un tableau supplémentaire. Si tu colles le code ci-dessous dans le setup de l'exemple Bubble Chart tu auras 3 bulles avec des couleurs différentes.

const data = {
  datasets: [{
    label: 'First Dataset',
    data: [{
      x: 20,
      y: 30,
      r: 15
    }, {
      x: 30,
      y: 16,
      r: 10
    }, {
      x: 40,
      y: 10,
      r: 10
    }],
    backgroundColor: ['rgb(255, 99, 132)','rgb(255, 255, 132)','rgb(0, 99, 132)',]
  }]
};
3

Mais alors,comment écrire cela dans mon code ?

Cordialement.

Pierre.

4

Je viens d'ajouter quelque chose à mon message précédent.

5

J'ai essayé ça :

                chart0.data.datasets[0].data = [{ x: Re, y: Im, r: 10}], backgroundColor: ['rgb(Math.trunk(Im*255), Math.trunk(Re*255), 0)'];

Ça ne fonctionne pas et ça bloque tout !

Cordialement.

Pierre.

7

En y regardant mieux, il me semble que label, data et backgroundColor sont des éléments de datasets donc je me demande si ce ne devrait pas être comme ceci, ou quelque chose dans le genre car je n'ai pas touché à ça depuis longtemps.

chart0.data.datasets[0].data = [{ x: Re, y: Im, r: 10}];
chart0.data.datasets[0].backgroundColor = ['rgb(Math.trunk(Im*255), Math.trunk(Re*255), 0)'];
8

Avec cette syntaxe, ça semble fonctionner :

Au départ j'ai mis une couleur rouge.

Si, dans la ligne que tu me proposes, je mets une couleur RGB fixe, dès que j'active l'affichage, je vois la couleur passer rapidement de rouge à la couleur RGB.

Si je mets une couleur variable, comme celle décrite par ma formule, dès que j'active l'affichage, je vois la couleur passer rapidement de rouge à noir ou équivalent et ne plus en bouger.

J'ai essayé différentes manières d'avoir une couleur variable (random par exemple), ça passe rapidement du rouge au noir pour ne plus en bouger !!!

9
10

Au fur et à mesure de mes essais, j'ai fini par comprendre que les données dans la paramètre rgb ne pouvaient être que des constantes.

Mon affichage concernant un cosPhi, j'ai résolu le problème en faisant des secteurs fonctions de ce cosPhi et à coups de if ... else ... j'ai donné des valeurs spécifiques de couleur dans chacun d'eux. Ça fonctionne et ça me va bien.

            fetch('/infoUIP') // Affichage du cos Phi
              .then(response => response.text())
              .then(data => {
                const [P, U, I] = data.split(',');
                let Re = parseFloat(P)/(parseFloat(U)*parseFloat(I));
                let Im = Math.sqrt(1 - Math.pow(Re, 2));
                chart0.data.datasets[0].data = [{ x: Re, y: Im, r: 10}];
                if (Im > 0.98)
                  {chart0.data.datasets[0].backgroundColor = ['rgb(255, 0, 0)'];}
                else if (Im > 0.83)
                  {chart0.data.datasets[0].backgroundColor = ['rgb(236, 98, 0)'];}
                else if (Im > 0.55)
                  {chart0.data.datasets[0].backgroundColor = ['rgb(180, 180, 0)'];}
                else if (Im > 0.19)
                  {chart0.data.datasets[0].backgroundColor = ['rgb(98, 236, 0)'];}
                else
                  {chart0.data.datasets[0].backgroundColor = ['rgb(0, 255, 0)'];}
                chart0.update();
              });

Cordialement.

Pierre.

11

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