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

Question

我在我的 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)

at drawChart (楼主Add: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>

我很困惑为什么我会在其他页面上出现该错误，而不是在仪表板上出现错误？

欢迎任何形式的帮助，提前致谢。

Answer 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，
您发布的代码工作正常......

请参阅以下工作片段

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

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