谷歌图表进入 JQuery Tab 绘制问题
Posted
技术标签:
【中文标题】谷歌图表进入 JQuery Tab 绘制问题【英文标题】：Google charts into JQuery Tab draw issue 【发布时间】：2016-06-22 09:49:34 【问题描述】：我目前正在尝试移动通过 socket.io 从服务器端提取数据并将其绘制到 JQuery UI 选项卡中的 Google 图表。
遇到的问题是第一个绘制的报告工作正常并且看起来很好。
第二个看起来很错误，我认为这可能与绘制表格的方式有关，但无法找到解决方案，当我只是将其绘制到 JQuery UI 选项卡之外的 div 中时，不会发生此问题。
这是我现在拥有的当前代码：
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);
);
);
我已经配置了一个 JS fiddle 来模拟 HERE 遇到的问题
【问题讨论】：
【参考方案1】：问题是图表在最初绘制时是隐藏的。 您可以设置特定的尺寸选项或...
等到选项卡被激活，在第一次绘制图表之前，如本例中...
$(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>【讨论】：
遇到的问题是，当我在上面的代码中添加 socket.io 以使用您建议的解决方案时，我无法访问这些功能。 Socket.on?当任何东西从服务器端传递给它时，它就会运行代码和包含在其中的所有内容。你是这个意思吗？是的，我试过了，但我会仔细检查 抱歉，当您说 我无法访问这些功能 时——您的意思是drawMaterial 和 drawChart 吗？不熟悉socket.io...
尝试增加宽度，但它什么也没做，是的，我无法访问这些功能 drawMaterial 和 drawChart 因为上面的 socket.io
根据你给我的例子，我确实有一个解决方法，但这意味着我从服务器端提取信息并将其粘贴到全局变量中，我知道不建议这样做如果您希望我发表建议？【参考方案2】：
我已经根据你给@Whitehat 的建议用我自己的代码修改了它，它工作正常，但这意味着我必须使用我认为不推荐的全局变量。
您对此有何想法或任何建议的更改或改进？
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);
);
【讨论】：
我现在明白了，谢谢。这很难——而且你必须等待setOnLoadCallback，因为页面会重新加载？
我想是的，它不是一个理想的解决方案，但现在它有效，所以我会将您的回复标记为答案以上是关于谷歌图表进入 JQuery Tab 绘制问题的主要内容，如果未能解决你的问题，请参考以下文章