谷歌图表进入JQuery Tab绘制问题

Google charts into JQuery Tab draw issue

本文关键字：Tab 绘制 问题 JQuery 谷歌      更新时间：2023-09-26

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

我的问题是，绘制的第一份报告工作正常，看起来也不错。

第二个看起来很错误，我认为这与我绘制表格的方式有关，但无法找到解决方案，当我只是将其绘制到 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小提琴来模拟我在这里遇到的问题

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

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

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

我根据

您给出的建议用自己的代码对其进行了修改@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);
        }
});
相关文章：