随机得到：“类型错误：google.visualization.DataTable不是构造函数”

我在我的网页的一个描绘几个图表，但我随机获得在控制台中出现以下错误：随机得到：“类型错误：google.visualization.DataTable不是构造函数”

TypeError: google.visualization.DataTable is not a constructor

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

我读过多个论坛和this documentation但我看不出什么是错的。除了我的函数在setOnLoadCallback之前被声明，否则他们得到undefined，我的代码与上述文档基本相同。

我的一些（简化）代码：

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

在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); 
    } 
}

来源

2017-05-08 remyremy

的文件是在这一点上很陈旧...

不建议使用多个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); 
     }); 
    } 
    } 
}

来源

2017-05-08 14:05:04 WhiteHat

我重组我的代码如你所说：移动它的'$（文件）.ready'之外，但是删除了所有''setOnLoadCallback直接在'load'声明加载'drawCharts'，我仍然会遇到同样的问题。有两点需要提及：我需要在'drawCharts'函数之后放置'load'语句，或者它不确定;一个简单的F5总是触发错误。当我刷新缓存（Firefox中的CTRL + R）时，图表正确显示。我怀疑加载文件/模块时出现了问题...... – remyremy

这已经在页面的底部，并且有一些其他的'

惠特除非你需要在使用之前加载表格图表，否则eHat对所有内容都是正确的。就像这样：

google.charts.load("current", { 
     packages : [ "corechart","table" ] 
    });

来源

2017-11-27 10:08:22 Skywalker

随机得到：“类型错误：google.visualization.DataTable不是构造函数”

回答

相关问题