04
NOV

Pizza pie charts: Créez des camemberts responsives en JS et SVG

Publié le 04/11/13 à 07h50 par DJo

Pizza Pie Charts est une bibliothèque Javascript permettant de créer des diagrammes camemberts responsive et interactifs en SVG.

Pizza Pie Charts est une bibliothèque Javascript permettant de créer des diagrammes camemberts responsive et interactifs en SVG.

Récemment lancé par Zurb, Pizza Pie Charts est une bibliothèque JS qui conviendra parfaitement à ceux qui sont à la recherche du design 100% responsive de qualité.

Basé sur Foundation (de Zurb, forcément), les Pie charts s'adapteront à leur conteneur automatiquement sans perdre en qualité (compatible Retina).

Pizza Pie Charts: Camemberts SVG responsive

Sa mise en place reste classique, une liste HTML:

<ul data-pie-id="my-cool-chart">
  <li data-value="36">Pepperoni</li>
  <li data-value="14">Sausage</li>
  <li data-value="8">Cheese</li>
  <li data-value="11">Mushrooms</li>
  <li data-value="7">Chicken</li>
  <li data-value="24">Other</li>
</ul>

Et lancez le JS avec la commande suivante (après avoir inclu toutes les autres librairies):

Pizza.init();

Bien sûr il existe plusieurs options pour personnaliser vos camemberts: 

{
  donut: false,
  donut_inner_ratio: 0.4,   // between 0 and 1
  percent_offset: 30,       // relative to radius
  stroke_color: '#333',
  stroke_width: 0,
  show_percent: true,       // show or hide the percentage on the chart.
  animation_speed: 500,
  animation_type: 'elastic' // options: backin, backout, bounce, easein, 
}                           //          easeinout, easeout, linear

A vos graphes !

 

Site Officiel

Personne n'a baraguiné de chtite phrase pour le moment !


Ajouter un Commentaire

Pour poster un commentaire, vous devez être identifié. Vous pouvez choisir parmi ces trois méthodes d'identification:

Compte la Ferme du Web

Identifiez-vous
Inscrivez-vous

Compte Facebook

Connexion avec Facebook

Compte Twitter

Connexion avec votre compte twitter
Rechercher sur la Ferme du web