Javascript Girl
  1. Javascript Girl
  3. Graphiques de Google dans l'option JQuery Tab Draw
Intereting Posts
Pourquoi Math.prototype est-il indéfini? Passer l'élément de liste de c # à javascript array Obtenir la valeur d'une variable de localStorage à partir d'un fichier javascript différent Mesurer la performance de Javascript Transformer dynamiquement en css en utilisant le style ng ReferenceError: impossible de trouver une variable: $ Google reCAPTCHA: comment obtenir la réponse de l'utilisateur et valider du côté du serveur Comment calculer les coefficients de polynôme en utilisant l'interpolation Lagrange Exposer jQuery à l'objet Real Window avec Webpack Comment réinitialiser les transformations SVG (c.-à-d. Renvoyer un objet SVG à son état d'origine)? Comment obtenir tous les dimanches / lundi / mardi entre deux dates? Qu'est ce que 'typeof define ===' function '&& define ' used for? Est-il possible de .sort (comparer) et .reverse un tableau dans angularfire? Javascript pourquoi double escapade dot / character Modifier les prototypes de tous les éléments DOM possibles

Graphiques de Google dans l'option JQuery Tab Draw

Je tente actuellement de déplacer des diagrammes Google dans lesquels les données sont tirées du côté serveur via socket.io et en les dessinant dans les onglets JQuery UI.

Le problème est que le premier rapport qui se dessine fonctionne bien et qu'il a l'air bien.

Le 2ème semble tout à fait erroné, je pense que c'est quelque chose à voir avec la façon dont les tableaux peuvent être tirés, mais je ne parviens pas à trouver une solution, ce problème ne se produit pas lorsque je l'ai simplement en divs en dehors des onglets JQuery UI.

C'est le code actuel que j'ai en ce moment: 

jQuery(function ($) { var socket = io.connect(); var result = []; google.charts.load('current', { packages : ['bar'] }); $(function() { $( "#tabs" ).tabs(); }); socket.on("SQLdipo", function (valueArr) { google.charts.setOnLoadCallback(drawMaterial); var data = valueArr; function drawMaterial() { var result = [['Call Disposition', 'Answered', 'No Answer', 'Busy','Failed']].concat(valueArr); var options = { height: 350, chart: { title: 'Agent Call Dispositions', subtitle: 'Agent call states', } }; var chartdata = new google.visualization.arrayToDataTable(result); var chart1 = new google.charts.Bar(document.getElementById('chartDipo')); chart1.draw(chartdata, options); } }); socket.on("SQLmins", function (valueArr) { google.charts.setOnLoadCallback(drawChart); var data = valueArr; function drawChart() { var result = [['Total Mins', 'Active','Inactive']].concat(valueArr); var options = { height: 350, chart: { title: 'Agent Activity in seconds', subtitle: 'Agent Duration Activity', } }; var chartdata = new google.visualization.arrayToDataTable(result); var chart2 = new google.charts.Bar(document.getElementById('chartMins')); chart2.draw(chartdata, options); } }); });

J'ai configuré une violoncelle JS pour imiter le problème. MAIS

Je pense que le problème est que le graphique est caché lorsqu'il est initialement dessiné.
Vous pouvez définir une largeur spécifique ou …

Attendez jusqu'à ce que l'onglet soit activé, avant de dessiner le graphique, comme dans cet exemple … 

 $(document).ready(function() { $("#tabs").tabs({ activate: function(event, ui){ switch (ui.newTab.index()) { case 0: drawMaterial(); break; case 1: drawChart(); break; } } }); google.charts.load('current', { callback: drawMaterial, packages: ['bar'] }); function drawMaterial() { var data = google.visualization.arrayToDataTable([ ['Call Disposition', 'Answered', 'No Answer', 'Busy', 'Failed'], ['1000', 4, 0, 2, 0], ['1001', 4, 2, 0, 0], ['1002', 6, 0, 0, 0] ]); var options = { height: 350, chart: { title: 'Agent Call Dispositions', subtitle: 'Agent call states', } }; var chart1 = new google.charts.Bar(document.getElementById('chartDipo')); chart1.draw(data, options); } function drawChart() { var data = google.visualization.arrayToDataTable([ ['Call Disposition', 'Answered', 'No Answer', 'Busy', 'Failed'], ['1000', 4, 0, 2, 0], ['1001', 4, 2, 0, 0], ['1002', 6, 0, 0, 0] ]); var options = { height: 350, chart: { title: 'Agent Call Dispositions', subtitle: 'Agent call states', } }; var chart1 = new google.charts.Bar(document.getElementById('chartMins')); chart1.draw(data, options); } }); 
 <link rel="stylesheet" type="text/css" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> <script src="https://www.gstatic.com/charts/loader.js"></script> <div class="tab-div" id="tabs"> <ul> <li><a href="#tabs-1">Call Disposition</a></li> <li><a href="#tabs-2">Agent Activity</a></li> </ul> <div id="tabs-1"> <div class="report-style" id="chartDipo"></div> </div> <div id="tabs-2"> <div class="report-style" id="chartMins"></div> </div> </div>

Je l'ai modifié avec mon propre code en fonction de la suggestion que vous avez donnée à @Whitehat qui fonctionne bien, mais cela signifie que je dois utiliser des globals qui, je le crois, ne sont pas recommandés.

Quelles sont vos pensées à propos de cela ou de tout changement ou amélioration suggéré? 

 jQuery(function ($) { //Global Varibles var socket = io.connect(); var result = []; google.charts.load('current', { packages : ['bar'] }); $("#tabs").tabs({ activate: function(event, ui){ switch (ui.newTab.index()) { case 0: drawMaterial(); break; case 1: drawChart(); break; } } }); socket.on("SQLdipo", function (valueArr) { google.charts.setOnLoadCallback(drawMaterial); data1 = valueArr; }); socket.on("SQLmins", function (valueArr) { google.charts.setOnLoadCallback(drawChart); data2 = valueArr; }); function drawMaterial() { var result = [['Call Disposition', 'Answered', 'No Answer', 'Busy','Failed']].concat(data1); var options = { height: 350, chart: { title: 'Agent Call Dispositions', subtitle: 'Agent call states', } }; var chartdata = new google.visualization.arrayToDataTable(result); var chart1 = new google.charts.Bar(document.getElementById('chartDipo')); chart1.draw(chartdata, options); } function drawChart() { var result = [['Total Mins', 'Active','Inactive']].concat(data2); var options = { height: 350, chart: { title: 'Agent Activity in seconds', subtitle: 'Agent Duration Activity', } }; var chartdata = new google.visualization.arrayToDataTable(result); var chart2 = new google.charts.Bar(document.getElementById('chartMins')); chart2.draw(chartdata, options); } });