未捕获（在承诺中）错误：未定义容器-Java 学习之路

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

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

error:

未捕获（在承诺中）错误：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 at

My Chart Code:

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

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

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

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

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>

回复于 2024-04-28T06:37:30+08:00

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

1 回答

相关问题