Logo Des Geeks et des lettres

sitemap

Pour les lecteurs qui m'ont demandé

la liste de tous les articles :

Ici le plan du site

Vous cherchez à surfer sur internet de manière anonyme ? Sur Des Geeks et des lettres nous vous conseillons le VPN Hide My Ass (voir ici notre test)

Comment réaliser de beaux graphiques en CSS

Introduction

Il est assez rare de voir de beaux graphiques de type Histogramme, Barres, Courbes ou Camemberts dans une page Web sans utiliser la technologie Flash qui nécessite un plugin et n’est pas lisible par tous les navigateurs.

© http://chart.apis.google.com

© http://chart.apis.google.com

Sommes nous contraint d’utiliser Flash pour visualiser nos données sous forme graphique ? non. Voici une liste d’alternatives :

  1. WebGL, ce futur standard pour la 3D dans nos navigateurs web, pourra à coup sûr réaliser ce genre de graphique mais il n’est pas aujourd’hui totalement utilisable, il faut attendre quelques années.
  2. JavaScript et l’utilisation conjointe de l’API Google Chart Tools permet de réaliser beaucoup de graphiques impressionnant disponibles à cette adresse.
  3. CSS est cependant l’alternative retenu dans cet article car son rôle est la présentation des données d’une page web. Avec un peu d’imagination et de talent pour ceux qui présentent leur solution, il est possible de réaliser les principaux graphiques présentés ci-dessous.

Histogramme

Le graphique le plus utilisé est l’histogramme, voici un article qui explique la façon de le mettre en place :

Une seconde version de l’histogramme précédent consiste à juxtaposer deux valeurs par barres verticales au lieu d’une :

© http://www.webresourcesdepot.com

© http://www.webresourcesdepot.com

Barre

Ce graphique est généralement utilisé pour une barre de chargement ou pour représenter le résultat d’un sondage, voici un article qui met en place une barre horizontale ultra simple :

Une version un peu plus complexe qui permet de se rendre compte un peu mieux de l’évolution ou du reste à faire :

© http://applestooranges.com

© http://applestooranges.com

Courbe

Ce type de graphique n’est pas très répandu mais peut trouver sa place, par exemple pour un site boursier :

© http://cssglobe.com

© http://cssglobe.com

Camembert

L’avantage de ce graphique est que d’un seul coup d’oeil on se fait une idée rapide des proportions affichés. L’article cité ci-dessous a l’avantage de n’utiliser aucune image mais il faut un navigateur reconnaissant le CSS3 pour pouvoir l’appliquer :

Une version beaucoup plus jolie et fluide sous WebKit, l’utilisation complète des selecteurs CSS3 est impressionnante :

Conclusion

Ceci montre à quel point CSS est puissant, on pourrait presque croire que rien est impossible à faire :)

Même si vous n’allez jamais utilisé de graphiques dans vos sites, les moyens mis en place par ces différents articles sont très intéressants et très instructifs.

{ 8 commentaires… J’ajoute le mien }

  • Greg 2 juin 2010, 22 10

    Hihi ! en voyant ces graphiques je pense à ma professeur de français au collège. Elle avait une sainte horreur des mathématiques et, devant de tels déballages de chiffres, elle aurait poussé un rire nerveux. Par contre elle était très bonne pour enseigner le français. Deux matières différentes, deux façons de penser différentes. Et pourtant, je reste convaincu que la barrière est en réalité très mince.

    Discutez
  • Mimie 5 juin 2010, 11 11

    Ca n’a pas l’air de faire l’unanimité le CSS vu le peu de commentaires :) tanpis pour vous !

    Discutez
  • Méta 6 juin 2010, 2 02

    C’est intéressant comme truc. C’est vrai que le CSS n’est pas le meilleur ami de tout le monde. Le tout est de s’y mettre :)

    Discutez
  • Mimie 6 juin 2010, 8 08

    Oui tu as raison, CSS et JavaScript sont boudés pour les développeurs (surtout les débutants).
    Cependant il est primordial de bien séparer la structure HTML de la présentation CSS du comportement JavaScript. Lorsque cela est fait, tout peut arriver et tout peut être fait, la preuve ! :D

    Discutez
  • Mimie 16 juillet 2010, 10 10

    Discutez
  • Greg 16 juillet 2010, 10 10

    Tu rends de mettre à jour tes articles :)

    Discutez
  • Mimie 5 août 2010, 0 12

    Graphiques à l’aide de jQuery et HTML5 canvas : update_to_jquery_visualize_accessible_charts_with_html5_from_designing_with.

    Discutez
  • lasius7 26 janvier 2012, 20 08

    J’ai une sainte horreur du JS. Toutes ces idées pour générer des graphiques en pur CSS vont m’être bien utiles. Merci ;p

    Discutez

Vos participations


quatre + = 6

Article suivant:

Article précédent:

Coup de pouce

Recherche

Derniers Commentaires

  • Greg { Salut, Je peux comprendre, mais moi qui sais taper à 10 doigts je peux te... } – 01 nov, 7:29
  • Faculté des Sciences de la Technologie { je cherche un outil qui permet de visualiser (en graphique) la consommation CPU et mémoire... } – 31 oct, 23:22
  • aikami { personnellement je ne suis pas un trés grand Fan de clavier, ce n'est pour moi... } – 31 oct, 20:21
  • Lylo { Bonjour, Alors merci déjà pour cette explication mais j'ai quand même quelques questions car je... } – 31 oct, 18:04
  • Greg { :D } – 30 oct, 18:14
  • -- pseudo modéré par l'admin -- { voila qui explique pourquoi Google a tenue à avoir son propre réseau social } – 30 oct, 15:40
  • Canima { Super, avec ... ça fonctionne, merci pour cette astuce ! J'ai enfin pu centrer mes... } – 30 oct, 9:17
  • Supprimer Facebook { Le paradoxe des réseaux sociaux est le suivant : les utilisateurs y vont pour exister... } – 28 oct, 13:51
  • Greg { Merci pour la trouvaille. Je trouve sa version un peu trop linéaire, et sa voix... } – 28 oct, 8:55