Developpez.com

Plus de 2 000 forums
et jusqu'à 5 000 nouveaux messages par jour

Chart.js : créez des graphiques HTML5

Le , par FirePrawn, Expert éminent sénior
Développez des graphiques côté client orientés objets
Avec ces bibliothèques JavaScript qui manipulent le HTML5

Chart.js est une bibliothèque JavaScript conçue pour utiliser les nouvelles fonctionnalités HTML5.

Cette bibliothèque va vous permettre de créer des graphiques au sein de vos pages en utilisant les canvas HTML5.
Chart.js est supporté sur tous les navigateurs récents (supportant le HTML5) et offre un fallback spécifique pour IE7 et IE8.

Vous disposez de six types de graphiques différents :
  • les courbes ;
  • les graphiques en barres ;
  • les graphiques en étoile ;
  • les camemberts ;
  • les graphiques polaires ;
  • les graphiques en « beignets ».

Chacun de ces types peut être animé, entièrement personnalisé et s'affiche correctement même sur un écran retina.

Chart.js n'a besoin d'aucune autre bibliothèque pour fonctionner, est très léger (environ 4.5 ko zippé) et offre de nombreuses options de personnalisation.

Pour plus d'informations, je vous invite à consulter la documentation.

Télécharger Chart.js.

Source : chartjs.org

Et vous ?

Avez-vous déjà utilisé des graphiques dans vos pages ?
Si oui, avez-vous utilisé une bibliothèque spécifique ?


Vous avez aimé cette actualité ? Alors partagez-la avec vos amis en cliquant sur les boutons ci-dessous :


 Poster une réponse

Avatar de Kaamo Kaamo - Membre expert https://www.developpez.com
le 18/03/2013 à 10:08
Intéressant ! Je cherche actuellement une bibliothèque qui permet de faire ce genre de chose. J'ai simplement analysé ce que propose Sencha pour le moment mais j'ai peur qu'il soit trop gros pour ce que je veux faire, je vais comparer avec ça ! Quelqu'un l'utilise ? Ou utilise autre chose pour réaliser des graphiques ?
Avatar de sekaijin sekaijin - Expert éminent https://www.developpez.com
le 18/03/2013 à 15:59
pour sencha tu peux utiliser senchatools
tu mets dans ta page HTML le chargement de sencha (simple debug)
tu place ton js perso avec dedans les riquires pour les composants sencha que tu utilise
tu lance senchatools et tu obtien un js ne contenant que le noyeau extjs les compoasants que tu utilise et ton propre code.

ce n'est donc pas lourd.
A+JYT
Avatar de Kaamo Kaamo - Membre expert https://www.developpez.com
le 18/03/2013 à 16:42
Du code à la carte, en somme. Intéressant, je ne connaissais pas.
Merci de l'information
Avatar de SylvainPV SylvainPV - Rédacteur/Modérateur https://www.developpez.com
le 18/03/2013 à 16:49
Je ne comprends pas pourquoi on trouve autant de librairies de graphiques basées sur <canvas> alors que le SVG est prédisposé pour ça. Tous les graphiques peuvent très facilement être gérés en vectoriel, et ça permettrait en prime des fonctions de zoom, de sélection d'éléments, de gestion d'évènements sur des sous-composants du graphique.

J'avais un besoin d'interactivité sur des graphiques pour un de mes projets, et la seule librairie qui réponde vraiment à mes besoins fut elycharts ; mais elle n'est pas tenue à jour et le code source est un vrai bazar en italien.

Quelqu'un pourrait aussi coder une librairie de graphiques basée sur http://bonsaijs.org/ ; je m'y collerais peut-être un de ces jours
Offres d'emploi IT
Ingénieur analyste programmeur (H/F)
Safran - Auvergne - Montluçon (03100)
Ingénieur développement fpga (traitement vidéo) H/F
Safran - Ile de France - 100 rue de Paris 91300 MASSY
Expert décisionnel business intelligence H/F
Safran - Ile de France - Évry (91090)

Voir plus d'offres Voir la carte des offres IT
Responsable bénévole de la rubrique JavaScript : Xavier Lecomte -