时间戳

首页 > 解决方案 > 一次加载多个谷歌图表时出错

javascript - 一次加载多个谷歌图表时出错

问题描述

我需要的？？

我需要有两个谷歌图表。根据以下屏幕截图，在网络的每个选项卡上都有 一个

发生了什么？？ 第二个图表未正确加载并显示混合信息。您可以查看以下屏幕截图： 第二个选项卡

¿¿我做了什么？？

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

多个 Google 图表无法在同一页面上正确显示

和

在同一页面上显示多个 Google 图表

但不能正常工作。

这是我的代码：

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

标签： javascriptphpchartspygooglechart

解决方案

需要等到选项卡显示出来，
然后才能第一次绘制图表...

绘制默认显示的图表，
然后在显示选项卡时触发选项卡时... 

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

}

推荐阅读