随机得到：“TypeError: google.visualization.DataTable is not a constructor”

Question

随机得到：“TypeError: google.visualization.DataTable is not a constructor”

rem*_*emy 4 javascript google-visualization

我在我的一个网页上绘制了几个图表，但是我在控制台中随机收到以下错误：

TypeError: google.visualization.DataTable is not a constructor

Run Code Online (Sandbox Code Playgroud)

我试图通过只显示一张图表来缩小问题的范围，但我仍然收到错误消息并且没有绘制图表，大约有 50% 的时间。当我没有收到错误时，图表绘制正确。

我已经阅读了多个论坛和这个文档，但我看不出有什么问题。我的代码与上述文档基本相同，除了我的函数是在之前声明的setOnLoadCallback，否则它们会得到undefined.

我的一些（简化）代码：

我的页面.php :

<!DOCTYPE html>
<html>
  <head>
    // loading CSS
   </head>
     <body>
        <p>My page content...</p>
           <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
           <script src="https://www.gstatic.com/charts/loader.js"></script>
           <script src="/js/home.js" type="text/javascript"></script>
           // loading more scripts (moment.js, query.countdown.js, bootstrap.js...)
    </body>
</html>

Run Code Online (Sandbox Code Playgroud)

在 home.js 中：

$(document).ready(function(){
  if (window.location.href == 'XXXXXController') {  

    // This chart draws a dual axis chart showing revenues and expenses
    function drawRevenuesExpenses() {
        var jsonData = $.ajax({
            type: "POST",
            url: "/draw_dual_lineChart",
            data: "someParameters",
            dataType:"json"
            }).done(function (jsonData) {          
                // Create our data table out of JSON data loaded from server.
                var data_chart = new google.visualization.DataTable(jsonData[0]['data']);
                // Set chart's options
                var options = jsonData[1]['options'];
                // Instantiate and draw the chart
                var chart = new google.visualization.LineChart(document.getElementById('dual_chart_revenues_expenses')); 
                chart.draw(data_chart, options);
            });
    }

    // This chart draws the resort's affluence (number of tourists per day)
    function drawAffluence() {
        var jsonData = $.ajax({
            type: "POST",
            url: "/draw_single_lineChart",
            data: "someParameters",
            dataType:"json"
            }).done(function (jsonData) {          
                // Create our data table out of JSON data loaded from server.
                var data_chart = new google.visualization.DataTable(jsonData[0]['data']);
                // Set chart's options
                var options = jsonData[1]['options'];
                // Instantiate and draw the chart
                var chart = new google.visualization.LineChart(document.getElementById('single_chart_affluence')); 
                chart.draw(data_chart, options);
            });
    }

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

Run Code Online (Sandbox Code Playgroud)

Answer 1

Whi*_*Hat 5

文档在这一点上非常陈旧......

不建议使用多个setOnLoadCallback语句

实际上，您可以将callback直接放在load语句中

你可以依靠callback知道页面何时准备就绪

不需要--> $(document).ready

尝试以下设置，在其他任何事情之前加载谷歌......

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

function drawCharts() {
  if (window.location.href == 'XXXXXController') {
      $.ajax({
          type: "POST",
          url: "/draw_dual_lineChart",
          data: "someParameters",
          dataType:"json"
      }).done(function (jsonData) {
          // Create our data table out of JSON data loaded from server.
          var data_chart = new google.visualization.DataTable(jsonData[0]['data']);
          // Set chart's options
          var options = jsonData[1]['options'];
          // Instantiate and draw the chart
          var chart = new google.visualization.LineChart(document.getElementById('dual_chart_revenues_expenses'));
          chart.draw(data_chart, options);
      });

      $.ajax({
          type: "POST",
          url: "/draw_single_lineChart",
          data: "someParameters",
          dataType:"json"
      }).done(function (jsonData) {
          // Create our data table out of JSON data loaded from server.
          var data_chart = new google.visualization.DataTable(jsonData[0]['data']);
          // Set chart's options
          var options = jsonData[1]['options'];
          // Instantiate and draw the chart
          var chart = new google.visualization.LineChart(document.getElementById('single_chart_affluence'));
          chart.draw(data_chart, options);
      });
    }
  }
}

Run Code Online (Sandbox Code Playgroud)

归档时间：	8 年，7 月前
查看次数：	5635 次
最近记录：	8 年前