Sébastien Warin

Vous connaissez les graphiques en radar ? Mais si, ces sortes de graphique en étoile :

Je me suis amusé pendant mes heures libres a développer une petite classe de génération de graphique de type radar. Bon certe, qu’on se le dise tout de suite, face a Office 2007 mes graphiques ne valent pas grand chose mais au moins c’est facilement exploitable sous .NET 🙂

J’avais initialement écrit cela dans un contexte professionnel et puis je me suis dis que ça valait le coup de pousser le bouchon un peu plus loin de en faire quelque chose de facilement ré-exploitable dans mes (et vos ^^) développements prochains..

Au début, je me suis demandé comment j’allais faire… Et puis quelques minutes plus tard j’ai repensé a une classe que j’avais écrite l’an dernier sur les complexes et publiée sur ce blog en Avril 2006 : Les complexes, pas complexe !!!
Et en effet avec les complexes, il n’y avait plus rien de complexe 🙂

Explications : je connais la taille de graphique voulu (passée dans le constructeur de ma classe), donc je devine assez facilement la taille d’une branche ainsi que le centre de mon graphique; j’ai donc ma 1er droite.
Pour avoir mes autres droites, il me suffit tout d’abord de calculer l’angle en fonction du nombre de branche par le calcul :
2PI/Nb.Branches
Par exemple, pour un graphique a 6 branches, mon angle est 2PI/6 soit PI/3 radian ou 60° degré ! Il me reste donc plus qu’a effectuer une rotation de mon point initial A de l’angle PI/3 par rapport au centre et j’obtiens bien mon 2eme point B.

Pour la suite, c’est identique sauf que le prochain point sera une rotation de l’angle PI/3 * 2; pour le suivant PI/3 * 3, etc… jusqu’à ce qu’on fasse le tour !
Il ne me reste plus qu’a dessiner les X droites partant du centre jusqu’aux points calculés et j’ai déjà ma base :

Pour placer les valeurs, il n’y a toujours rien de compliqué. Comme je connais mon centre et mon point A, j’ai une petite méthode qui me renvoi la position en pixel de ma valeur (branchSize – ((pourcentage * branchSize ) / 100)). Par exemple. 100% revient a placer le point sur le point A, par contre 0% sur le centre, 50% a mi-chemin entre le centre et le point A !
La 1er valeur est placée ! Pour le reste, je fais de même : je place ma valeur sur la 1er droite puis j’applique une rotation pour la placée sur la bonne branche et le tour est joué 🙂 Il ne me reste plus qu’a mettre le tout dans un tableau de Point et de l’envoyer à la méthode DrawPolygon() de l’objet Graphic :

Comme quoi les complexes simplifient vraiment la vie 🙂 Au final, nous n’utilisons que la méthode Rotation() du complexe a déplacer en lui passant comme argument l’angle (double) de rotation et le centre (complexe). J’ai quand même effectué quelques changements dans cette classe pour :

• Proposer un constructeur prenant un objet Point; afin de construire un complexe facilement a partir d’un point
• Proposer un accesseur get/set de type Point pour facilement passer d’un point à un complexe et vise vers sa !
• Ré-ecrire en plus propre (oui, oui, en 10mois on fais des progrès :))

Pour plus d’infos sur ma classe Complexe, je vous renvoie ici !

Utilisation : l’utilisation de ma classe de génération est vraiment très facile !
Tout d’abord, nous allons générer une liste de RadarItem contenant les valeurs, couleurs, noms etc.. des séries de votre graphique ! Ensuite nous construirons l’objet RadarChart pour appeler la methode GenerateChart qui vous renverra une simple image !

1ère étape : la liste de ChartItem
L’objet RadarItem représente les informations pour une série. Elle contient un tableau de double pour les valeurs, un Pen pour dessiner, un string pour le nom de la série et la possibilité de mettre un Brush pour remplir le polygon ! Exemple :

Nous créons ici une liste de 2 séries : « Serie 1 » et « Serie 2 », de couleur bleu et rouge avec les valeurs passées dans le tableau de double.
Si il n’y a pas assez de valeurs qu’il n’y a de branches, alors les valeurs manquantes seront initialisées à 0. Si à l’inverse, il y a trop valeurs qu’il n’y a de branches, les valeurs en trop ne seront pas dessinées !

2ème étape : construction de l’objet RadarChart
Une fois notre liste de valeur prête, nous allons construire notre objet RadarChart ! L’objet propose plusieurs constructeurs car vous avez la possibilité de définir :

• La taille de l’image générée
• Le nombre de branche (qui doit être > 3)
• Le padding : marge à gauche et marge en haut
• Le stylo (Pen) pour dessiner la base
• La nombre de graduation (int)
• Un tableau de string : pour les labels placés sur les branches
• Font et Brushes : pour définir la police et couleur des labels
• La couleur du fond

Exemple concret :

Nous construisons ici l’objet myGraph qui retournera une image de 370×350 avec 5 branches, une marge de 30px sur la gauche et le haut, une base dessinée en Gray (gris) avec 5 niveaux de graduation. Les branches auront les libellés : Perf, Rapidités, …. et seront écrit en Arial, taille 8 de couleur noir et le tout sur un fond blanc !
Graphiquement, cela donne :

3ème étape : génération du graphique
Une fois notre objet construit, il ne nous reste plus qu’a générer notre graphique par la méthode GenerateChart() qui nous retournera une Image.
Le 1er argument est notre liste de RadarItem (liste des séries). Ensuite les 3 arguments optionnels sont :

• bool drawLegend : dessine la légende
• bool drawValues : affiche les valeurs
• bool drawPoint : dessine les points

J’ai donc placé une PictureBox sur une form et placé le code :

Ce qui nous retourne l’image :

Alors c’est compliqué de générer des graphiques ? 😉 Vive les complexes ! Avec les sources trouverez un projet Winform avec une form de démo permettant de tester plusieurs graphiques à l’exécution :

Ce n’est pas une version finale, il faudrait y mettre des accesseurs aux propriétés passées dans le constructeur pour permettre de modifier le graphique sans pour autant recréer un objet. Et graphiquement il y a aussi des petites qui peuvent être revu comme la légende, placement des labels et valeurs, etc… mais là plus le temps 🙁

Si un jour vous avez besoin de générer des graphiques de ce type n’hésitez pas !! Les commentaires/suggestions/critiques sont les bienvenues 🙂

Télécharger le projet

(ps: je ne sais pas si je dois encore le dire, mais c’est codé en c# sous .NET 2.0 ^^)