Javascript Girl
  1. Javascript Girl
  3. Dessinez plusieurs graphiques Google pour la boucle
Intereting Posts
Comment app.listen () et app.get () fonctionnent sur express et hapi Le moyen le plus rapide de transmettre les données à une fenêtre contextuelle que j'ai créée à l'aide de window.open ()? Comment mettre deux iframes côte à côte Limitation d'âge de 18 ans – Bootstrap Datepicker Back Button Handle Un formulaire dynamique Demander de nouveau l'autorisation de géolocalisation s'il a été refusé Comment appeler une fonction JavaScript à partir d'un JavaFX WebView on Button? Comment afficher / masquer DIV sur la sélection de TOUTES les valeurs déroulantes? Appliquer la bordure extérieure pour le graphique de la zone de liste haute Script de Photoshop JS pour créer et appliquer un masque de calque Élément accessible avec ID Javascript – Suppression des espaces sur la pâte Lecture en longitude mesurée en degrés avec un lsb de 1×10 ^ -7 degrés, complément de signature 2 Empêcher Chrome d'envelopper le contenu de <p> avec un <span> Onglet Auto dans le champ de saisie suivant lorsque vous remplissez 4 caractères

Dessinez plusieurs graphiques Google pour la boucle

J'essaie de dessiner plusieurs graphiques Google dans une boucle for, mais je ne peux pas sembler le faire fonctionner. J'ai posé des questions similaires, mais seulement avec PHP. Quelqu'un peut-il aider? C'est ce que j'ai essayé jusqu'à présent https://jsfiddle.net/8nfbz1v1/ 

<ul id="draw-charts"></ul> 

  google.charts.load('current', {'packages':['corechart']}); for(var i = 0; i>6; i+){ var charts = ""; google.charts.setOnLoadCallback(drawChart); function drawCharts() { charts += '<td><div id="chart_div' + i +'" style="border: 1px solid #ccc"></div></td>'; $("#draw-charts").html(charts); var data = new google.visualization.DataTable(); data.addColumn('string', 'Topping'); data.addColumn('number', 'Slices'); data.addRows([ ['Mushrooms', 1], ['Onions', 1], ['Olives', 2], ['Zucchini', 2], ['Pepperoni', 1] ]); var options = {title:'How Much Pizza Sarah Ate Last Night', width:400, height:300}; // Instantiate and draw the chart for Sarah's pizza. var chart = new google.visualization.PieChart(document.getElementById('chart_div' + i)); chart.draw(data, options); } }

setOnLoadCallback ne doit être appelé qu'une fois par page

Une fois qu'il se déclenche, vous pouvez dessiner autant de tableaux que nécessaire

Vous pouvez également inclure le callback dans l'instruction de load

Voir l'extrait de travail suivant … 

 google.charts.load('current', { callback: function () { var data = new google.visualization.DataTable(); data.addColumn('string', 'Topping'); data.addColumn('number', 'Slices'); data.addRows([ ['Mushrooms', 1], ['Onions', 1], ['Olives', 2], ['Zucchini', 2], ['Pepperoni', 1] ]); var options = { title:'How Much Pizza Sarah Ate Last Night', width:400, height:300 }; for (var i = 0; i < 6; i++) { var container = document.getElementById('draw-charts').appendChild(document.createElement('div')); var chart = new google.visualization.PieChart(container); chart.draw(data, options); } }, packages: ['corechart'] }); 
 <script src="https://www.gstatic.com/charts/loader.js"></script> <ul id="draw-charts"></ul>