Help ! Affichage kWh au centre d'un Donut

Informatique Entraide
,
1

Bonjour à tous,

Alors voilà je bloque sur l'ajout du total énergétique en kWh au centre de mon donut créer via le plugin "Business Chart".
image

Vous trouverez ci-dessous le code du setOption() où j'ai volontairement retiré mes essais de calculs pour le remplacer par le champ texte 'Total\n 0 kWh' afin de vous aider à le situer.

image
image628×327 17.8 KB

Si quelqu'un maitrise je suis preneur.
En gros il suffit de faire la somme du dataset.source mais je n'y arrive pas.

voici le code du setOption() dans Function :

return {
  dataset: {
    source: context.editor.dataset.source,
  },
  tooltip: {
    trigger: 'item'
  },







  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: [70, '80%'],
      percentPrecision: 0,

      label: {
        show: true,
        position: 'outside',
        formatter: '{b} : {d} %',
        fontSize: 12,
        color: '#fff'
      },
      labelLine: {
        show: true
      },

      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ],


  graphic: {
    elements: [
      {
        type: 'text',
        left: 'center',
        top: 'middle',
        style: {
          text: 'Total\n 0 kWh',
          fill: '#fff',
          fontSize: 16,
          fontWeight: 'bold',
          textAlign: 'center'
        }
      }
    ]
  }



}
2

Je me répond à moi-même mais si cela peut aider certain.

En fait ce qui m'a débloqué c'est d'afficher les données du "dataset" en texte formaté en JSON pour être certain de la structure de celui-ci. J'ai ensuite simplement demandé à ChatGPT d'adapter la fonction reduce() à mon dataset.

Voici le résultat visuel :

Voici le code fonctionnel :

return {
  dataset: {
    source: context.editor.dataset.source,
  },
  tooltip: {
    trigger: 'item'
  },

  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: [45, '50%'],
      percentPrecision: 0,

      label: {
        show: true,
        position: 'outside',
        formatter: '{b} : {d} %',
        fontSize: 12,
        color: '#fff'
      },
      labelLine: {
        show: true
      },

      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ],

  graphic: {
    elements: [
      {
        type: 'text',
        left: 'center',
        top: 'middle',
        style: {
          text: (() => {
            const src = context.editor.dataset.source || [];
            const total = (src.length > 1
              ? src.slice(1).reduce((s, r) => {
                const v = parseFloat(Array.isArray(r) ? r[0] : r?.value);
                return s + (isNaN(v) ? 0 : v);
              }, 0)
              : 0
            );
            const totalStr = total.toLocaleString('fr-FR', {
              minimumFractionDigits: 0,
              maximumFractionDigits: 0
            });
            return `{title|Total}\n{value|${totalStr} kWh}`;
          })(),
          rich: {
            title: {
              fill: '#fff',
              fontSize: 12,         // plus petit (comme l’exemple)
              fontWeight: 'normal',
              lineHeight: 20
            },
            value: {
              fill: '#fff',
              fontSize: 14,         // plus grand (comme l’exemple)
              fontWeight: 'bold',
              lineHeight: 20
            }
          },
          textAlign: 'center'
        }
      }
    ]
  }
}
3

Bonsoir @Neuvidor
Voudrais tu partager le code de la carte au complet s’il te plaît ?
C’est une belle réussite ce que tu as fait et ça m’intéresse pour remplacer les miennes qui ne sont pas terrible :innocent: