jQuery Girl
  1. jQuery Girl
  3. Chart.js animé sur défilement
Intereting Posts
js et css ne détecte pas le chargement d’une nouvelle page Changer controlgroup thème bouton actif Redimensionner l’image d’arrière-plan des objects déplaçables lors du redimensionnement Liste de commande avec jQuery glisser-déposer Débutant JQuery:: a pour descendants directs uniquement élever le zoom ne fonctionne pas Meilleur plugin jQuery Date pour des dates de différence extrême (1000+ BC – Aujourd’hui) Ajout d’un titre de rendu HTML dans Google Charts Les tables mobiles jQuery définissent la vue par défaut Comment désactiver la recherche pour la colonne seleted dans jqGrid? PopOver ajustement automatique placement Pourquoi cette fonction est-elle indéfinie? Tirez le script jQuery lorsque la publication a lieu vue de complétion automatique cassée (problème iscroll) scripting d’une soumission de formulaire google docs

Chart.js animé sur défilement

Je travaille avec chart.js mais je voudrais aussi afficher le graphique en défilement.

Je travaille avec ce code: DEMO 1 

var doughnutData = [ { value: 30, color:"#F7464A" }, { value : 120, color : "#4D5360" } ]; var myDoughnut = new Chart(document.getElementById("canvas").getContext("2d")).Doughnut(doughnutData);

Mais il apparaît toujours, pas sur le défilement.

En regardant autour de moi j’ai vu ce violon qui fait l’effet: DEMO 2

Mais la mise à jour du code suivant vers ma première démo ne fonctionne pas: DEMO 1 À JOUR

doughnutData place data 

 new Chart(document.getElementById("canvas").getContext("2d")).Pie(doughnutData);

JSFiddle

Si vous avez besoin d’un doghnut:

JSFiddle

Si vous ne voulez pas que chaque parchemin redémarre, essayez ceci: 

 $(window).bind("scroll", function(){ $('.startChart').each(function(i){ var options = { animationEasing: 'easeOutQuart', animationSteps: 150, segmentShowStroke: true, segmentStrokeColor: 'FFF' }; var doughnutData = [ {value: 30, color:"#F7464A"}, {value : 120,color : "#4D5360"} ]; var myDoughnut = new Chart(document.getElementById("canvas").getContext("2d")).Doughnut(doughnutData, options); $(window).unbind(i); }); });

http://jsfiddle.net/MU9aw/74/