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é :
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) :
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)
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)