标签：javascript jquery jquery-ui socket-io google-visualization

我目前正在尝试移动谷歌图表,其中数据通过socket.io从服务器端拉出并将其绘制到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小提琴来模拟我有HERE的问题

解决方法:

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

在第一次绘制图表之前,请等到选项卡激活,如本例所示……

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

标签：javascript,jquery,jquery-ui,socket-io,google-visualization
来源： https://codeday.me/bug/20191002/1843610.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。