Question

¿¿我需要什么？

我需要有两个Google图表。按照以下屏幕截图在网络的每个标签上显示一个 Tabs

¿¿发生了什么事？ 第二张图表无法正确加载，并显示混合的信息。您可以检查以下屏幕截图： Seccond tab

？¿我做了什么？

在这里问之前，我尝试了其他答案：

Multiple Google charts not displaying properly on the same page

和

Displaying multiple Google charts on same page

但是不能正常工作。

这是我的代码：

<head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">


        google.charts.load("43", { packages: ["corechart", "gauge", "table", "timeline", "bar"] });
        google.charts.setOnLoadCallback(drawStuff);
        function drawStuff() {

            dataTable = new google.visualization.DataTable();

            var newData = <?php include ('tpl\include\test.php')?>

            var numRows = newData.length;
            var numCols = newData[0].length;

            dataTable.addColumn('string', newData[0][0]);

            for (var i = 1; i < numCols; i++)
            dataTable.addColumn('number', newData[0][i]);           

            for (var i = 1; i < numRows; i++)
                dataTable.addRow(newData[i]);    

            var options = {
            width: 425,
            height: 450,
            chart: {
                title: 'SLAs by Analist',
            },
            bars: 'horizontal'
            }
            ;

            var chart = new google.charts.Bar(document.getElementById('dual_1_div'));
            chart.draw(dataTable, options);

            //Second chart
            dataTable2 = new google.visualization.DataTable();

            var newData2 = <?php include ('tpl\include\test2.php')?>

            var numRows2 = newData2.length;
            var numCols2 = newData2[0].length;

            dataTable2.addColumn('string', newData2[0][0]);

            for (var ie = 1; ie < numCols2; ie++)
            dataTable2.addColumn('number', newData2[0][ie]);           

            for (var ie = 1; ie < numRows2; ie++)
                dataTable2.addRow(newData2[ie]);    

            var options2 = {
            width: 425,
            height: 450,
            chart: {
                title: 'By Analist',
            },
            bars: 'horizontal'
            }
            ;
            var chart2 = new google.charts.Bar(document.getElementById('dual_2_div'));
            chart2.draw(dataTable2, options2);
            }
     </script>
</head>

这是每个图表的div：

<div id="dual_1_div" style="width: 300px; height: 450px;"></div>
<div id="dual_2_div" style="width: 300px; height: 450px;"></div>

有什么想法吗？

此外，我正在使用引导程序制作标签：

<div role ="tabpanel">
<ul class="nav nav-tabs" role="tablist">
    <li role"presentation" class="active">
        <a href="#tab1" aria-controls="tab1" data-toggle="tab" role="tab">In progress</a>
    </li>
    <li role"presentation">
        <a href="#tab2" aria-controls="tab2" data-toggle="tab" role="tab">Completed</a>
    </li>
</ul>
<div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="tab1"> <!--My Queue TAB-->
        <div class="container-fluid">
            <div class="flow">
                <div class="container col-xs-8">
                    <?php
                        include ('tpl\include\ocases.column1.tpl.php')
                    ?>
                </div>
                <div class="container col-xs-4" > <!-- Grafico! -->
                    <nav class="bs-docs-sidebar  affix">
                        <?php
                            include ('tpl\include\ocases.column2.tpl.php')
                        ?>
                    </nav>
                </div>
            </div>
        </div>
    </div>
    <div role="tabpanel" class="tab-pane" id="tab2"> <!-- Completed TAB-->
    <div class="container-fluid">
            <div class="flow">
                <div class="container col-xs-8">
                    <div class="table-responsive">
                        <?php
                            include ('tpl\include\ocases.completed.columna1.tpl.php')
                        ?>
                    </div>
                </div>
                <div class="container col-xs-4" > <!-- Grafico! -->
                    <nav class="bs-docs-sidebar  affix">
                        <?php
                            include ('tpl\include\ocases.completed.columna2.tpl.php')
                        ?>
                    </nav>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

需要等到显示标签后，
第一次绘制图表之前...

绘制默认显示的图表，
然后当显示的标签事件触发时...

  // draw default chart
  chart.draw(dataTable, options);

  // draw chart when tab is shown
  $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
      switch ($(e.target).html()) {
        case 'In progress':
          chart.draw(dataTable, options);
          break;

        case 'Completed':
          chart2.draw(dataTable2, options2);
          break;
      }
  });

请参阅以下完整代码段...

google.charts.load("43", { packages: ["corechart", "gauge", "table", "timeline", "bar"] });
google.charts.setOnLoadCallback(drawStuff);
function drawStuff() {
  dataTable = new google.visualization.DataTable();

  var newData = <?php include ('tpl\include\test.php')?>

  var numRows = newData.length;
  var numCols = newData[0].length;

  dataTable.addColumn('string', newData[0][0]);

  for (var i = 1; i < numCols; i++)
  dataTable.addColumn('number', newData[0][i]);

  for (var i = 1; i < numRows; i++)
      dataTable.addRow(newData[i]);

  var options = {
    width: 425,
    height: 450,
    chart: {
        title: 'SLAs by Analist',
    },
    bars: 'horizontal'
  };

  var chart = new google.charts.Bar(document.getElementById('dual_1_div'));

  //Second chart
  dataTable2 = new google.visualization.DataTable();

  var newData2 = <?php include ('tpl\include\test2.php')?>

  var numRows2 = newData2.length;
  var numCols2 = newData2[0].length;

  dataTable2.addColumn('string', newData2[0][0]);

  for (var ie = 1; ie < numCols2; ie++)
  dataTable2.addColumn('number', newData2[0][ie]);

  for (var ie = 1; ie < numRows2; ie++)
      dataTable2.addRow(newData2[ie]);

  var options2 = {
    width: 425,
    height: 450,
    chart: {
        title: 'By Analist',
    },
    bars: 'horizontal'
  };
  var chart2 = new google.charts.Bar(document.getElementById('dual_2_div'));

  // draw default chart
  chart.draw(dataTable, options);

  // draw chart when tab is shown
  $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
      switch ($(e.target).html()) {
        case 'In progress':
          chart.draw(dataTable, options);
          break;

        case 'Completed':
          chart2.draw(dataTable2, options2);
          break;
      }
  });

}

一次加载多个Google图表时出错

1 个答案: