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

问题描述

我目前正试图移动谷歌图表，其中数据通过socket.io从服务器端拉出并绘制到JQuery UI选项卡中。

我们遇到的问题是，第一份得到的报告工作正常，看起来很好。第二种看起来很不对劲，我认为它与如何绘制表格有关，但我们无法找到解决方案，这个问题在简单时就不会发生将它绘制到JQuery UI选项卡外的div中。

这是我现在使用的代码：

<$ p $（$）{
var socket = io.connect（）;
var result = [];
google.charts.load（'当前'，{
packages：['bar']
}）;

$（function（）{
$（#tabs）.tabs（ ）;
}）;

socket.on（SQLdipo，function（valueArr）{
google.charts.setOnLoadCallback（drawMaterial）;
var data = valueArr;
函数drawMaterial（）{

var result = [['Call Disposition'，'Answered'，'No Answer'，'Busy'，'Failed']]。concat（ valueArr）;
var options = {
height：350，
cha rt：{
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）;
}
}）;
$ b 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 ，
图：{
title：'代理活动秒数'，
副标题：'代理持续时间活动'，
}
};
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.visu alization.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（数据，选项）; }函数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（数据，选项）; < link rel =stylesheet

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

解决方案

I think the problem is the chart is hidden when it is initially drawn.
You could set a specific width or...

Wait until the tab is activated, before drawing the chart, 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屋！