Javascript Girl
  1. Javascript Girl
  3. Comment ajouter plusieurs graphiques de google de matériel à une seule page?
Intereting Posts
Performances Javascript TypedArray Email détaillé dans Sencha Touch donnant exception Une file d'attente de type sémaphore en javascript? Jquery vérifie si l'élément est visible dans viewport Supprime les éléments vides d'un tableau en Javascript VSCode Linter ES6 ES7 Babel linter Android – utilisant addJavaScriptInterface pour renvoyer une valeur de Javascript Trouvez-vous ce que javascript modifie le DOM? Exception non saisie: erreur de syntaxe, expression non reconnue: # Valeur de la propriété de la requête d'une classe css même si elle n'est pas utilisée JQuery – analyse des données JSON – Avoir des problèmes avec le nom de la variable Ajouter des étiquettes aux noeuds dans l'exemple de mise en page de la force D3 "Group / Bundle Nodes" de Hobbelt? Pourquoi de nombreuses bibliothèques javascript commencent par "(function () {"? La bonne façon d'obtenir http referrer de jquery Comment obtenir le nom du fichier pour <input type = "file" dans jsp

Comment ajouter plusieurs graphiques de google de matériel à une seule page?

Cette question a déjà été posée , mais en ce qui concerne l'ancienne API corechart , dont je n'ai pas eu de problème, et non les nouveaux tableaux de Material . Par exemple, le code suivant créera deux graphiques comme prévu: 

 var data = [ ['Year', 'Sales', 'Expenses', 'Profit'], ['2014', 1000, 400, 200], ['2015', 1170, 460, 250], ['2016', 660, 1120, 300], ['2017', 1030, 540, 350] ]; google.load('visualization', '1', { 'packages': ['corechart'] }); google.setOnLoadCallback(drawChart); function drawChart() { new google.visualization.ColumnChart(document.getElementById('groupedBar')).draw( new google.visualization.arrayToDataTable(data), {}); new google.visualization.ColumnChart(document.getElementById('stackedBar')).draw( new google.visualization.arrayToDataTable(data), {isStacked:true}); }

Http://jsfiddle.net/crclayton/r67ega11/10/

Cependant, la version mise à jour: 

 google.load('visualization', '1.1', { // note version 1.1 and bar package 'packages': ['bar'] }); google.setOnLoadCallback(drawChart); function drawChart() { new google.charts.Bar(document.getElementById('groupedBar')).draw( new google.visualization.arrayToDataTable(data), google.charts.Bar.convertOptions({})); new google.charts.Bar(document.getElementById('stackedBar')).draw( new google.visualization.arrayToDataTable(data), google.charts.Bar.convertOptions({ isStacked: true })); }

Http://jsfiddle.net/crclayton/r67ega11/6/

… ne fera que rendre l'un des graphiques, parfois le premier, parfois le second. Il ne jettera pas d'erreur, il ignorera simplement l'autre. J'ai essayé de les google.setOnLoadCallback en fonctions individuelles, en assignant tout à des variables, en réinitiant google.setOnLoadCallback avec les mêmes résultats.

J'ai également constaté que lors du rendu de différents types de graphiques , je n'ai pas ce problème.

Des idées?

Il est très probable que le même problème soit signalé dans le dépôt de problèmes de visualisation de google :

Les problèmes que les gens ont vu avec le dimensionnement de multiples exemples de graphiques matériels devraient être résolus avec cette nouvelle version. Vous pouvez changer votre code pour charger "1.1" maintenant afin que lorsque la version du candidat soit disponible, vous l'utiliserez.

Il existe au moins deux solutions disponibles pour le moment:

Option 1. Rendre les graphiques de manière synchrone

L'idée générale est de rendre syntaxique le graphique. Comme la fonction de dessin est asynchrone, nous utilisons ready gestionnaire d'événements ready à cette fin.

Remplacer: 

 function drawChart_() { new google.charts.Bar(document.getElementById('groupedBar')).draw( new google.visualization.arrayToDataTable(data), google.charts.Bar.convertOptions({})); new google.charts.Bar(document.getElementById('stackedBar')).draw( new google.visualization.arrayToDataTable(data), google.charts.Bar.convertOptions({ isStacked: true })); }

avec: 

 function drawChart() { var groupedBarChart = new google.charts.Bar(document.getElementById('groupedBar')); google.visualization.events.addOneTimeListener(groupedBarChart, 'ready', function(){ var stackedBarChart = new google.charts.Bar(document.getElementById('stackedBar')); stackedBarChart.draw(new google.visualization.arrayToDataTable(data),google.charts.Bar.convertOptions({isStacked: true})); }); groupedBarChart.draw(new google.visualization.arrayToDataTable(data),google.charts.Bar.convertOptions({})); }

Exemple 

 var data = [ ['Year', 'Sales', 'Expenses', 'Profit'], ['2014', 1000, 400, 200], ['2015', 1170, 460, 250], ['2016', 660, 1120, 300], ['2017', 1030, 540, 350] ]; google.load('visualization', '1.1', { 'packages': ['bar'] }); google.setOnLoadCallback(drawChart); function drawChart() { var groupedBarChart = new google.charts.Bar(document.getElementById('groupedBar')); google.visualization.events.addOneTimeListener(groupedBarChart, 'ready', function(){ var stackedBarChart = new google.charts.Bar(document.getElementById('stackedBar')); stackedBarChart.draw(new google.visualization.arrayToDataTable(data),google.charts.Bar.convertOptions({isStacked: true})); }); groupedBarChart.draw(new google.visualization.arrayToDataTable(data),google.charts.Bar.convertOptions({})); } function drawChart_() { new google.charts.Bar(document.getElementById('groupedBar')).draw( new google.visualization.arrayToDataTable(data), google.charts.Bar.convertOptions({})); new google.charts.Bar(document.getElementById('stackedBar')).draw( new google.visualization.arrayToDataTable(data), google.charts.Bar.convertOptions({ isStacked: true })); } 
 <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript" src="chart.js"></script> <div class="chart" id="groupedBar" style></div> <div class="chart" id="stackedBar" style></div>