无法读取未定义谷歌图表的属性“0”

Question

我在加载 2 个图表时收到此错误消息“无法读取未定义的谷歌图表的属性 '0'”，并且仅在我第一次加载页面时出现。如果我在 chrome 上单击 F5，它们会正确加载。如果我调整浏览器的大小，它们会显示正确加载。可能是什么问题呢 ？ IE 显示一次此错误，Chrome 每次我第一次打开页面时都会显示此错误。有时我在加载页面时会收到此错误：

0x800a138f - JavaScript 运行时错误：无法获取未定义或空引用的属性“arrayToDataTable”

请看我下面的代码：

<script src="../Scripts/jquery-1.12.0.min.js"></script>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
    
  google.charts.load('current', { 'packages': ['corechart'] });
  google.charts.setOnLoadCallback(drawChart1);
    
  google.charts.load('current', { 'packages': ['corechart'] });
  google.charts.setOnLoadCallback(drawChart2);
     
  $(window).resize(function () {
    
    if (width != $(window).width() || height != $(window).height()) {  //only refresh if screen size changes
            drawChart1();
            drawChart2();
                     
            width = $(window).width();
            height = $(window).height();
    }
    });
    
    $(document).ready(function () {
    
        width = $(window).width();
        height = $(window).height();
    });
    
    function drawChart1() {
    
        var data = google.visualization.arrayToDataTable([
                    ['Minute', 'Users'],
                    ['0 Min', 9],
                    ['1 Min', 28],
                    ['2 Min', 1],
                    ['3 Min', 1],
                    ['5 Min', 1]
                ]);
    
        var options = {
                    slices: {
                        0: { offset: 0.2 }
                    },
    
                    chartArea: { 'left': '5%', 'top': '10%', 'width': '100%', 
                 'height': '100%' }
                };
    
                  
        var chart = new 
               google.visualization.PieChart(document.getElementById('graph1'));
                chart.draw(data, options);
            }
    
    function drawChart2() {
    
    
            var data = google.visualization.arrayToDataTable([
                    ['Minute', 'Users'],
                    ['0 Min', 20],
                    ['4 Min', 4],
                    ['5 Min', 1],
                    ['8 Min', 8],
                    ['10 Min', 3]
                ]);
    
            var options = {
                    // title: 'Group C Users'
                    pieHole: 0.5,
                    chartArea: { 'left': '5%', 'top': '10%', 'width': '100%', 
                              'height': '100%' }
                };
     
            var chart = new 
               google.visualization.PieChart(document.getElementById('graph2'));
                chart.draw(data, options);
     }

Answer 1

首先，您可以删除jsapi，它不再被使用...

<script type="text/javascript" src="http://www.google.com/jsapi"></script>

接下来，您只需拨打google.charts.load一次，
您还可以在加载语句中包含callback。

尝试替换这个...

google.charts.load('current', { 'packages': ['corechart'] });
google.charts.setOnLoadCallback(drawChart1);

google.charts.load('current', { 'packages': ['corechart'] });
google.charts.setOnLoadCallback(drawChart2);

有了这个……

google.charts.load('current', {
  packages: ['corechart'],
  callback: function () {
    drawChart1();
    drawChart2();
  }
});