5

我在我的 Code-Igniter 应用程序中使用谷歌图表（饼图）。我在仪表板视图页面上显示图表，并且得到了正确的结果。但是当我检查我的其他页面时，我得到了一个错误

未捕获（承诺中）错误：未定义容器。

错误：

未捕获（承诺中）错误：未定义容器

在 gvjs_3m (jsapi_compiled_default_module.js:66)

在 gvjs_9K.gvjs_7p [作为构造函数] (jsapi_compiled_default_module.js:232)

在 gvjs_9K.gvjs_8K [作为构造函数] (jsapi_compiled_ui_module.js:979)

在新的 gvjs_9K (jsapi_compiled_ui_module.js:1010)

在drawChart（房东地址：648）

在房东地址：623

在

我的图表代码：

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

  <script type="text/javascript">
    $(document).ready(function(){
      $.ajax({
        url: "<?php echo base_url().'Dashboard/chartData'; ?>",
        dataType: "JSON",
        success:function(result){
          google.charts.load('current',{
            'packages':['corechart']
          });
          google.charts.setOnLoadCallback(function(){
            drawChart(result);
          });
          //alert(result);
        }
      });

      function drawChart(result) {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Name');
        data.addColumn('number', 'defects');

        var dataArray = [];

        $.each(result, function(i, obj) {
          dataArray.push([obj.name, parseInt(obj.defects)]);
        });

        data.addRows(dataArray);

        var piechart_options = {
          title : 'Defects Registered',
          width : 500,
          height: 300,
          is3D: true,
        };
        var piechart = new google.visualization.PieChart(document.getElementById('piechart_div'));
        piechart.draw(data, piechart_options);
      }
    });
  </script>

HTML 代码：

<div class="box-body">
    <table class="columns">
        <tr>
            <td>
                <div class="col-md-6" id="piechart_div"></div>
            </td>
            <td>
                <div class="col-md-6" id="donutchart_div"></div>
            </td>
        </tr>
    </table>
</div>

我很困惑为什么我在其他页面上收到该错误而不是在仪表板上收到错误？

欢迎任何形式的帮助，在此先感谢。

4

1 回答 1

1

虽然这可能无法解决您的问题，
但您实际上可以使用google.charts.load而不是 -->$(document).ready
默认情况下，google.charts.load将等到文档准备好

推荐一些不同的设置... 

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

google.charts.load('current', {
  packages:['corechart']
}).then(function () {
  $.ajax({
    url: "<?php echo base_url().'Dashboard/chartData'; ?>",
    dataType: "JSON",
    success:function(result){
      drawChart(result);
    }
  });

  function drawChart(result) {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Name');
    data.addColumn('number', 'defects');

    var dataArray = [];

    $.each(result, function(i, obj) {
      dataArray.push([obj.name, parseInt(obj.defects)]);
    });

    data.addRows(dataArray);

    var piechart_options = {
      title : 'Defects Registered',
      width : 500,
      height: 300,
      is3D: true,
    };
    var piechart = new google.visualization.PieChart(document.getElementById('piechart_div'));
    piechart.draw(data, piechart_options);
  }
});

</script>

但是您需要检查所有抛出错误的页面，
是否有一个div元素具有绘制图表时使用的 id... 

// check for div with proper id
var piechart = new google.visualization.PieChart(document.getElementById('piechart_div'));

error在回调中替换硬编码数据，
您发布的代码可以正常工作......

请参阅以下工作片段

google.charts.load('current', {
  packages:['corechart']
}).then(function () {
  $.ajax({
    url: "<?php echo base_url().'Dashboard/chartData'; ?>",
    dataType: "JSON",
    success: function(result){
      drawChart(result);
    },
    error: function () {
      var result = [
        {name: 'defect 1', defects: '1'},
        {name: 'defect 2', defects: '2'},
        {name: 'defect 3', defects: '3'},
        {name: 'defect 4', defects: '4'},
        {name: 'defect 5', defects: '5'}
      ];

      drawChart(result);
    }
  });

  function drawChart(result) {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Name');
    data.addColumn('number', 'defects');

    var dataArray = [];

    $.each(result, function(i, obj) {
      dataArray.push([obj.name, parseInt(obj.defects)]);
    });

    data.addRows(dataArray);

    var piechart_options = {
      title : 'Defects Registered',
      width : 500,
      height: 300,
      is3D: true,
    };
    var piechart = new google.visualization.PieChart(document.getElementById('piechart_div'));
    piechart.draw(data, piechart_options);
  }
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="box-body">
    <table class="columns">
        <tr>
            <td>
                <div class="col-md-6" id="piechart_div"></div>
            </td>
            <td>
                <div class="col-md-6" id="donutchart_div"></div>
            </td>
        </tr>
    </table>
</div>

于 2018-01-19T12:52:51.697 回答