Comment réaliser de beaux graphiques en CSS

Photo of author
Écrit par Mimie

Se sentir libre de concilier "vie privée" et "vie numérique" sans intrusion.

Ma page Facebook

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 :

Pensez à créer et enregistrer vos mots de passe dans une application chiffrée !

Cette application compatible avec tous vos appareils vous permet de créer des mots de passe uniques avec une complexité ahurissante et les remplit sur les sites à votre place.
Le gestionnaire NordPASS

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

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 :

© http://cssglobe.com
© http://cssglobe.com

Camembert

Regardons les choses en face : La consultation de vidéos en ligne est une affaire individuelle et privée

Le problème, c'est que votre Fournisseur d'Accès Internet a accès à votre historique internet.
Sans compter que certains accès aux sites web sont limités dans plusieurs pays.
Récemment, les utilisateurs ont réalisé à quel point il est important de rester anonyme lorsqu'ils surfent sur internet.

La meilleure option est d'acheter un service VPN

NordVPN, logiciel et application VPN, comprend un DOUBLE CHIFFREMENT de votre trafic internet.
Il permet de contourner la censure et d'anonymiser votre connexion.
En savoir plus sur NordVPN

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 :

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.

Catégories Web

Maquillez votre adresse IP

⇒ Être anonyme sur internet

Nordvpn bannière maquiller votre adresse ip

7 réflexions au sujet de “Comment réaliser de beaux graphiques en CSS”

  1. 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
  2. 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

Laisser un commentaire