Plus de deux graphiques Google sur une seule page?

J'ai été en train de lutter contre ce problème depuis un certain temps maintenant, et il semble que Google a apporté beaucoup de modifications mineures à l'API Google Charts au fil des ans, ce qui a rendu encore plus difficile de trouver une réponse pour la raison pour laquelle mes tableaux sont Je travaille.

Je tente simplement d'afficher plus d'un type de graphique (graphiques à barres) sur une seule page. Juste aujourd'hui, j'ai trouvé une solution qui m'a permis d'afficher 2 graphiques à la fois (lien: " Google Charts arrête de dessiner après le premier graphique "), mais ce n'était qu'une victoire mineure car j'ai vraiment besoin de plus de 2 cartes à afficher, et ceci La solution force simplement un graphique à rendre avant l'autre.

Voici mon code actuel:

Javascript

google.load('visualization', '1', {packages: ['corechart', 'line', 'bar']}); google.setOnLoadCallback(drawStuff); function drawStuff() { // Courses_Played Data var data = new google.visualization.arrayToDataTable([ ['', 'Number of Rounds Played'], ["Ken McDonald", 10], ["ASU Karsten", 8], ["TPC Scotts...", 7], ["Ahwatukee", 3], ['Other', 3] ]); // Courses_played Options var options = { title: '', width: 440, height: 215, legend: { position: 'none' }, axes: {x: {0: { side: 'bottom' }}}, bar: { groupWidth: "70%" }, colors: ['darkgreen'], }; // Course_Scores Data var data2 = new google.visualization.arrayToDataTable([ ['', 'Number of Rounds Played'], ["TPC Scotts...", 81], ["ASU Karst...", 83], ["Ken McDonald", 87], ["Ahwatukee", 90], ]); //Course_Scores Options var options2 = { title: '', width: 440, height: 215, legend: { position: 'none' }, axes: {x: {0: { side: 'bottom' }}}, vAxis:{ viewWindow:{ min:60 }}, bar: { groupWidth: "70%" }, colors: ['darkgreen'], }; var chart = new google.charts.Bar(document.getElementById('Courses_Played')); google.visualization.events.addOneTimeListener(chart, 'ready', function(){ var chart2 = new google.charts.Bar(document.getElementById('Course_Scores')); // Convert the Classic options to Material options. chart2.draw(data2, google.charts.Bar.convertOptions(options2)); }); chart.draw(data, google.charts.Bar.convertOptions(options)); };

Encore une fois, ce code fonctionne actuellement, mais seulement parce que j'ai utilisé une solution qui ne fonctionne que pour deux graphiques. Le problème semble être dans les dernières lignes de code, car le fait de forcer le diagramme2 à rendre avant le premier graphique est ce qu'il a fonctionné. Je ne comprends pas ce que je dois faire pour permettre trois graphiques ou plus. Existe-t-il un moyen de forcer n'importe quel nombre de graphiques à rendre l'un avant l'autre?

Je pense que vous avez un problème avec la version actuelle, qui a des problèmes.
Vous ne devriez pas attendre un graphique pour charger avant de charger un autre.

Voici un exemple qui charge la version 41 -> les 3 graphiques dessinent, sans attendre un autre.

 google.charts.load('41', {packages: ['bar']}); google.charts.setOnLoadCallback(drawStuff); function drawStuff() { // Courses_Played Data var data = new google.visualization.arrayToDataTable([ ['', 'Number of Rounds Played'], ["Ken McDonald", 10], ["ASU Karsten", 8], ["TPC Scotts...", 7], ["Ahwatukee", 3], ['Other', 3] ]); // Courses_played Options var options = { title: '', width: 440, height: 215, legend: { position: 'none' }, axes: {x: {0: { side: 'bottom' }}}, bar: { groupWidth: "70%" }, colors: ['darkgreen'], }; // Courses_Played2014 Data var data3 = new google.visualization.arrayToDataTable([ ['', 'Number of Rounds Played'], ["Ken McDonald", 14], ["ASU Karsten", 12], ["TPC Scotts...", 11], ["Ahwatukee", 7], ['Other', 7] ]); // Courses_played2014 Options var options3 = { title: '', width: 440, height: 215, legend: { position: 'none' }, axes: {x: {0: { side: 'bottom' }}}, bar: { groupWidth: "70%" }, colors: ['darkgreen'], }; // Course_Scores Data var data2 = new google.visualization.arrayToDataTable([ ['', 'Number of Rounds Played'], ["TPC Scotts...", 81], ["ASU Karst...", 83], ["Ken McDonald", 87], ["Ahwatukee", 90], ]); //Course_Scores Options var options2 = { title: '', width: 440, height: 215, legend: { position: 'none' }, axes: {x: {0: { side: 'bottom' }}}, vAxis:{ viewWindow:{ min:60 }}, bar: { groupWidth: "70%" }, colors: ['darkgreen'], }; var chart = new google.charts.Bar(document.getElementById('Courses_Played')); var chart2 = new google.charts.Bar(document.getElementById('Course_Scores')); var chart3 = new google.charts.Bar(document.getElementById('Courses_Played2014')); chart.draw(data, google.charts.Bar.convertOptions(options)); chart2.draw(data2, google.charts.Bar.convertOptions(options2)); chart3.draw(data3, google.charts.Bar.convertOptions(options3)); };

 <script src="https://www.gstatic.com/charts/loader.js"></script> <script src="https://www.google.com/jsapi"></script> <div id="Courses_Played"></div> <div id="Courses_Played2014"></div> <div id="Course_Scores"></div>

Le problème dans Google Charts est que vous pouvez appeler google.charts.load () une seule fois. Vous devez donc inclure tous les paquets dans cet appel de fonction unique et appeler ceci à partir de la tête de la page Web.

Vous pouvez inclure plusieurs forfaits comme ceci:

 <head><script type="text/javascript"> google.charts.load("current", {packages:["corechart","bar"]}); </script> </head>

Cela a résolu mon problème et m'a permis d'afficher plusieurs tableaux sur une seule page sans changer de code.

Pour vérifier, vérifiez ceci: https://developers.google.com/chart/interactive/docs/basic_load_libs#basic-library-loading

L'exemple suivant montre comment rendre 3 Google Charts (de google.charts.Bar type) sur une seule page:

 google.load('visualization', '1', { packages: ['corechart', 'line', 'bar'] }); google.setOnLoadCallback(drawCharts); function drawCharts() { var chartsData = [ { 'data': [ ['', 'Number of Rounds Played'], ["Ken McDonald", 10], ["ASU Karsten", 8], ["TPC Scotts...", 7], ["Ahwatukee", 3], ['Other', 3] ], 'options': { title: '', width: 440, height: 215, legend: { position: 'none' }, axes: { x: { 0: { side: 'bottom' } } }, bar: { groupWidth: "70%" }, colors: ['darkgreen'], }, 'chartDivId' : 'Courses_Played' }, { 'data': [ ['', 'Number of Rounds Played'], ["TPC Scotts...", 81], ["ASU Karst...", 83], ["Ken McDonald", 87], ["Ahwatukee", 90], ], 'options': { title: '', width: 440, height: 215, legend: { position: 'none' }, axes: { x: { 0: { side: 'bottom' } } }, vAxis: { viewWindow: { min: 60 } }, bar: { groupWidth: "70%" }, colors: ['darkgreen'], }, 'chartDivId' : 'Course_Scores' }, { 'data': [ ['', 'Number of Rounds Played in 2014'], ["Ken McDonald", 5], ["ASU Karsten", 4], ["TPC Scotts...", 7], ["Ahwatukee", 4], ['Other', 6] ], 'options': { title: '', width: 440, height: 215, legend: { position: 'none' }, axes: { x: { 0: { side: 'bottom' } } }, bar: { groupWidth: "70%" }, colors: ['darkgreen'], }, 'chartDivId' : 'Courses_Played2014' }, ]; drawBarCharts(chartsData); }; function drawBarCharts(chartsData,index) { var curIndex = index || 0; var chartData = chartsData[curIndex]; var dataTable = new google.visualization.arrayToDataTable(chartData.data); var chart = new google.charts.Bar(document.getElementById(chartData.chartDivId)); google.visualization.events.addOneTimeListener(chart, 'ready', function () { if (curIndex < chartsData.length - 1) drawBarCharts(chartsData, curIndex + 1); }); chart.draw(dataTable, google.charts.Bar.convertOptions(chartData.options)); }

 <script type="text/javascript" src="https://www.google.com/jsapi"></script> <div id="Courses_Played"></div> <div id="Courses_Played2014"></div> <div id="Course_Scores"></div>