8711 sujets

Développement web côté serveur, CMS

Bonjour,

Souhaitant ajouter des graphiques sur mon site - sans l'aide de bibliothèques telles que D3.js ou Chart.js - je me suis penché sur la génération de graphiques via des SVGs. J'ai fait un peu le tour de ce qui existe et la solution de Grafikart a retenue mon attention. Je m'appuie sur sa solution et commence donc par des graphiques camemberts (pie chart), les plus difficiles pour moi étant donné qu'ils font appel à des algorithmes pour gérer les arcs, après cela les diagrammes battons devraient s'avérer beaucoup plus simples.

Il y avait quelques bugs avec la solution de Grafikart dans certaines conditions, j'ai donc ajouté un path pour accepter les valeurs nulles ou à 100% (et aussi quelques correctifs mineurs en CSS), au final j'ai à peu près ce que je veux : Charts (page d'exemple).

Il est à noter que Grafikart utilise un custom element pour packager son graphique, je garde cette solution pour l'instant (solution que je n'avais encore jamais testée jusqu'à ce jour)... Voici à quoi ressemble son code généré :
<pie-chart>
  <div>label 1</div>
  <div>label 2</div>
  <svg>
    <g mask="url(#graphMask)">
      <path></path>
      <path></path>
    </g>
    <mask id="graphMask"></mask>
  </svg>
</pie-chart>

Maintenant j'aimerais améliorer l'accessibilité du SVG en commençant par remplacer les labels, composés de <div>, par des éléments SVG <text>. Voici ce que je produis (on verra après coup si il faut ou non mettre les labels dans un groupe à part ou liés avec chacun son path) :
<pie-chart>
  <svg>
    <g mask="url(#graphMask)">
      <path></path>
      <path></path>
    </g>
    <g>
      <text>label 1</text>
      <text>label 2</text>
    </g>
    <mask id="graphMask"></mask>
  </svg>
</pie-chart>

Quel est mon soucis alors ? Et bien mes textes ne sont pas visibles (bien que correctement générés) ! Il y a forcément un truc qui interfère, mais je n'arrive pas à trouver quoi. Je vous partage donc un CodePen : Pie chart

Merci à ceux d'entre vous qui pourront m'aider.
Modifié par Olivier C (10 Apr 2023 - 17:59)
C'est bon j'ai trouvé : la viewBox étant ridiculement petite (mais pratique pour les calculs des arcs de cercle) la font devait être réduite drastiquement pour que l'on puisse voir le texte, du genre 5 ou 7% du texte initial. Maintenant pour positionner tout ça c'est une autre histoire. Je verrais si j'abandonne la modif' ou pas.

Édit : ah oui, et puis en plus l'élément <text> n'est pas facilement personnalisable, il faut passer par un rectangle SVG si l'on veut une couleur de fond pour ce même texte par exemple. Pas simple du tout cette histoire et je veux garder quelque chose de simple (sinon autant passer par une lib'). Je vais donc m'y prendre différemment (édit de l'édit : je m'en suis sorti avec des tabindex sur les labels).

Sujet résolu.
Modifié par Olivier C (11 Apr 2023 - 23:30)
Meilleure solution