• Passer au contenu principal
  • Passer à la barre latérale principale
  • Passer au pied de page
  • Être anonyme sur internet
  • Être anonyme sur Paypal
  • Mon téléphone est-il espionné ?
Logo Des Geeks Et Des Lettres

Des Geeks et des lettres

L'impact des technologies numériques sur l'individu

Tapez vos requêtes

Comment réaliser de beaux graphiques en CSS

Rédigé par Mimie le 2 juin 2010

bureau mac

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 impressionnants
  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 :

  • démo

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

  • article

Barre

Ce graphique est généralement utilisé pour une barre de chargement ou pour représenter le résultat d’un sondage.

Courbe

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

  • démo
  • sources
© 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 :

  • article/sources
  • démo

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.

Sending
Quelle note attribuez-vous sur un total de 5 ?
5 (2 votes)

Mes autres entrées sur le sujet: Web

NordVPN : Digne de confiance

Actuellement, NordVPN est l'un des fournisseurs de services VPN premium les plus sûrs.


Confidentiel

  • Son emplacement commercial
  • Sa politique d'absence de logs
  • Son infrastructure

...garantissent que la confidentialité de vos données sera respectée.

Il a fait l'objet de deux audits publics et détient la certification ioXt.

EN SAVOIR PLUS


découvrez NordVPN en 1 clic

Evolution

En juillet 2019, NordVPN a sorti son opus magnum : le protocole NordLynx.

Construit autour du protocole de tunneling WireGuard, il est capable d'offrir encore plus de fiabilité (grâce au système de double NAT) et des vitesses plus rapides.


Utilisez notre moteur de recherche

Qui suis-je ?

Passionné d'informatique et développeur JavaEE de métier, je me consacre principalement à écrire des billets sur les sujets du Web et de la programmation Web.
Ce blog est un espace qui me permet de partager mes découvertes avec vous et me sert accessoirement de pense bête !

7 Comments

  1. lasius7 26 janvier 2012

    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

    Répondre
  2. Mimie 5 août 2010

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

    Répondre
  3. Greg 16 juillet 2010

    Tu rends de mettre à jour tes articles 🙂

    Répondre
  4. Mimie 6 juin 2010

    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 ! 😀

    Répondre
  5. Méta 6 juin 2010

    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 🙂

    Répondre
  6. Mimie 5 juin 2010

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

    Répondre
  7. Greg 2 juin 2010

    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.

    Répondre

Leave a Reply

Annuler la réponse

Barre latérale principale

Ne ratez pas un article
Nom : 
Email :*
Please wait...
Please enter all required fields Click to hide
Correct invalid entries Click to hide
Aucun spam. Recevez nos articles par Email

A lire aussi

the pirate bay differents noms de domaine

20 choses que vous ignoriez sur The Pirate Bay

Publié le 11 avril 2022

censure internet

Les différentes formes de la censure internet

Publié le 25 mars 2022

Pages utiles

  • Les auteurs du blog
  • A propos
  • Blog
  • Mentions légales
  • Plan du site
  • Contactez-nous
nordvpn-banniere-perso-350

Footer

À propos

Vous êtes surveillé. De multiples organisations privées et publiques surveillent et enregistrent vos activités en ligne.

DesGeeksetdeslettres.com fournit des outils et des connaissances pour protéger votre vie privée contre la surveillance massive mondiale. Ce blog anime depuis 2009 une communauté florissante d'individus soucieux de la protection de la vie privée et s'informe au jour le jour des nouvelles avancées en matière de protection de vos données en ligne.

Notre but : rechercher et recommander les meilleures solutions logicielles pour notre communauté.

→ The Pirate Bays : solutions et sites miroir pour y accéder

La transparence

La transparence est notre plus grande valeur et c’est ce qui nous distingue du reste de la communauté. Les modifications rédactionnelles apportées à ce blog et aux produits que nous recommandons sont toujours discutées dans la section des commentaires, grâce au formulaire de contact ou encore via nos réseaux sociaux comme Facebook ou Twitter.

Ce blog tient à remercier les centaines de lecteurs, contributeurs et vérificateurs de faits qui s’assurent que nos recommandations sont solides et fiables.

De même, nous ne pourrions rien faire sans nos entreprises affiliées ainsi que les membres de la communauté qui aident à partager nos nouvelles et à faire passer le mot. Je vous remercie du fond du coeur!

Recherche

Articles les plus populaires

  • Kickasstorrent : Connexion et téléchargement
  • RARBG Torrent : Proxy, Miroirs et Alternatives
  • 10 méthodes comment pirater un compte Netflix
  • Où trouver les meilleurs torrents de musique ?
  • Accéder à French Stream malgré la censure
  • Comment regarder Retour à l’Instinct Primaire non censuré

© DES GEEKS ET DES LETTRES blog français depuis 2009 Facebook Twitter Pinterest Newsletter

Desgeeksetdeslettres.com est un site web à vocation populaire qui fournit des informations pour protéger la sécurité et la confidentialité de vos données.

Ne confiez jamais votre vie privée à une entreprise, chiffrez toujours vos données.