Javascript Girl
  1. Javascript Girl
  3. Visualisation de Google: Graphique de ligne animé – encreur plutôt que tout à la fois?
Intereting Posts
Effacer l'icône dans le texte d'entrée Spécifiez le dossier de téléchargement par défaut – éventuellement avec JavaScript? Comment modifier l'attribut href d'un lien en utilisant Jquery Comment arrêter l'élément avec le premier événement onclick à déclencher lorsque la touche Entrée est pressée la première fois Obtenir la position du curseur (en caractères) dans un champ de saisie de texte JavaScript ne déclenche pas après l'ajout Comment compiler de nouveaux modèles à l'exécution dans un météore? Convertissez les commandes Lat / Longs en X / Y Recadrer l'image en utilisant les coordonnées Quelle sera la séquence d'exécution de ce code javascript / Jquery? Pourquoi l'espace blanc est ignoré dans l'application AngularJS Pouvez-vous avoir une liste html dans une <textarea> et ça ressemble à une liste? Gestion du mode veille sur iPad à l'aide de Javascript Que fait le nouveau mot-clé sous le capot? Modifiez le traçage et le remplissage de l'image svg avec javascript

Visualisation de Google: Graphique de ligne animé – encreur plutôt que tout à la fois?

À l'heure actuelle, mon code ressemble à ceci: 

function drawChart() { var data = new google.visualization.DataTable(); data.addColumn('string', 'Year'); data.addColumn('number', 'Revenue'); data.addRows([ ['', 0], ['2008', 123], ['2010', 213], ['2012', 654] ]); var options = { hAxis: {textStyle:{color: '#FFF'}}, vAxis: { baseline:0, baselineColor: '#FFF', gridlineColor: '#FFF', textStyle:{color: '#FFF'} }, backgroundColor: 'transparent', legend: { position: 'none' }, colors: ['#FFF'], textStyle:{color: '#FFF'}, pointSize: 10, series: { 0: { pointShape: 'star'} }, animation: {startup: true, duration: 5000, easing: 'linear',} }; var chart = new google.visualization.LineChart(document.getElementById('curve_chart')); chart.draw(data, options); }

Ce que je veux, c'est que mon animation dévoile de plus en plus chaque ligne. Comment puis-je faire cela?

Toute aide serait grandement appréciée.

Le graphique doit être dessiné pour que l'animation se produise

Maintenez les données et tracez seulement une ligne à la fois

Voir l'extrait de travail suivant … 

 google.charts.load('current', { callback: function () { var rawData = [ [0, 0], [1, 2], [2, 1], [3, 4], [4, 2], [5, 8], [6, 3], [7, 16], [8, 4], [9, 32] ]; var data = new google.visualization.DataTable({ "cols": [ {"id":"","label":"X","type":"number"}, {"id":"","label":"Y","type":"number"} ] }); var options = { pointSize: 4, animation:{ startup: true, duration: 600, easing: 'in' }, legend: 'none', hAxis: { viewWindow: { min: 0, max: 9 } }, vAxis: { viewWindow: { min: 0, max: 32 } } }; var chart = new google.visualization.LineChart(document.getElementById('chart_div')); drawChart(); setInterval(drawChart, 1200); var rowIndex = 0; function drawChart() { if (rowIndex < rawData.length) { data.addRow(rawData[rowIndex++]); chart.draw(data, options); } } }, packages:['corechart'] }); 
 <script src="https://www.gstatic.com/charts/loader.js"></script> <div id="chart_div"></div>