谷歌图表到 JQuery Tab 绘制问题 [英] Google charts into JQuery Tab draw issue

问题描述

我目前正在尝试移动 Google 图表，其中通过 socket.io 从服务器端提取数据并将它们绘制到 JQuery UI 选项卡中.

我遇到的问题是绘制的第一个报告工作正常并且看起来很好.

第二个看起来很错误，我认为这与我如何绘制表格有关，但我无法找到解决方案，当我只是将它绘制到 JQuery UI 选项卡之外的 div 中时，不会发生这个问题.

这是我现在拥有的当前代码:

jQuery(function ($) {var socket = io.connect();var 结果 = [];google.charts.load('当前', {包:['bar']});$(函数(){$( "#tabs" ).tabs();});socket.on("SQLdipo", 函数 (valueArr) {google.charts.setOnLoadCallback(drawMaterial);var 数据 = valueArr;函数 drawMaterial() {var result = [['Call Disposition', 'Answered', 'No Answer', 'Busy','Failed']].concat(valueArr);变量选项 = {高度:350，图表: {title: '代理呼叫处理',副标题:代理呼叫状态"，}};var chartdata = new google.visualization.arrayToDataTable(result);var chart1 = new google.charts.Bar(document.getElementById('chartDipo'));chart1.draw(图表数据，选项)；}});socket.on("SQLmins", 函数 (valueArr) {google.charts.setOnLoadCallback(drawChart);var 数据 = valueArr;函数 drawChart() {var 结果 = [['Total Mins', 'Active','Inactive']].concat(valueArr);变量选项 = {高度:350，图表: {title: '代理活动以秒为单位',副标题:'代理持续时间活动'，}};var chartdata = new google.visualization.arrayToDataTable(result);var chart2 = new google.charts.Bar(document.getElementById('chartMins'));chart2.draw(图表数据，选项)；}});});

我已经配置了一个 JS 小提琴来模拟问题，我有 HERE

解决方案

问题是图表在最初绘制时被隐藏了.
您可以设置特定的尺寸选项或...

等待选项卡被激活，然后再第一次绘制图表，如本例中...

$(document).ready(function() {$("#tabs").tabs({激活:功能(事件，用户界面){开关(ui.newTab.index()){案例0:绘制材料()；休息;情况1:绘制图表()；休息;}}});google.charts.load('当前', {回调:drawMaterial，包:['bar']});函数 drawMaterial() {var 数据 = google.visualization.arrayToDataTable([['呼叫处理'、'已应答'、'无应答'、'忙'、'失败']、['1000', 4, 0, 2, 0],['1001', 4, 2, 0, 0],['1002', 6, 0, 0, 0]]);变量选项 = {高度:350，图表: {title: '代理呼叫处理',副标题:代理呼叫状态"，}};var chart1 = new google.charts.Bar(document.getElementById('chartDipo'));chart1.draw(数据，选项)；}函数 drawChart() {var 数据 = google.visualization.arrayToDataTable([['呼叫处理'、'已应答'、'无应答'、'忙'、'失败']、['1000', 4, 0, 2, 0],['1001', 4, 2, 0, 0],['1002', 6, 0, 0, 0]]);变量选项 = {高度:350，图表: {title: '代理呼叫处理',副标题:代理呼叫状态"，}};var chart1 = new google.charts.Bar(document.getElementById('chartMins'));chart1.draw(数据，选项)；}});

<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">呼叫处置</a></li><li><a href="#tabs-2">代理活动</a></li><div id="tabs-1"><div class="report-style" id="chartDipo"></div>

<div id="tabs-2"><div class="report-style" id="chartMins"></div>

I am currently trying to move Google charts in which the data is being pulled from the server-side via socket.io and drawing them into JQuery UI Tabs.

The issue am having is that the first report that gets drawn in works fine and looks fine.

The 2nd looks quite wrong, I think its something to do with how am drawing the tables maybe but am unable to find a solution, this issue does not happen when am simply drawing it into divs outside the JQuery UI tabs.

This is the current code I have right now:

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);
        }
    });
});

I have made a configured a JS fiddle to emulate the issue am having HERE

解决方案

the problem is the chart is hidden when it is initially drawn.
you could set specific size options or...

wait until the tab is activated, before drawing the chart for the first time, as in this example...

$(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>

这篇关于谷歌图表到 JQuery Tab 绘制问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！