TypeError：google.visualization.DataTable 不是构造函数答案

【问题标题】：TypeError: google.visualization.DataTable is not a constructorTypeError：google.visualization.DataTable 不是构造函数
【发布时间】：2015-12-04 04:13:57
【问题描述】：

在我的网页上，我有一个谷歌地图，以及三个图表。当页面加载地图时，地图很好，但图表要么不加载，要么只有一两个加载。不断收到错误 TypeError: google.visualization.DataTable is not a constructor。

function load() {
     //map object
        var MY_MAP = new google.maps.Map(document.getElementById("map"), {
        center: {lat: 54.870902, lng: -6.300565}, 
        zoom: 14
      });    
      //call to get and process data
      downloadUrl("Map.php", processXML);
  }  

 // Load the Visualization API and the piechart package.
      google.load('visualization', '1.0', {'packages':['corechart']}); 
        // Set a callback to run when the Google Visualization API is loaded. 
google.setOnLoadCallback(drawAltitudeChart());  
google.setOnLoadCallback(drawDisplacementChart());
google.setOnLoadCallback(drawDistanceChart());  



function drawAltitudeChart(){

         //console.log('hello');
         var graph = [];
          downloadUrl("Map.php", function (data){
              var xml = data.responseXML;
              var markers = xml.documentElement.getElementsByTagName("marker");
              var dataTable = new google.visualization.DataTable();
              var options = {title:'Altitude (m above sea level)', 
                  curveType:'function', 
                  legend:{position:'bottom'},
                  is3d:true     
              };
              var chart;

              for(var i = 0; i<markers.length; i++){
                  graph[i] = ['', parseInt(markers[i].getAttribute("alt"))];   
              }

              dataTable.addColumn('string', 'id');
              dataTable.addColumn('number', 'Altitude');
              dataTable.addRows(graph);


              chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
              chart.draw(dataTable, options); 

          });
      }

【问题讨论】：

标签： javascript charts google-visualization

【解决方案1】：

我认为你不能像这样添加多个回调。

另外，你可以在load方法中定义回调，像这样...

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

function drawCharts() {
  drawAltitudeChart();
  drawDisplacementChart();
  drawDistanceChart();
}

编辑

上面的load 声明是针对older库...

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

根据release notes...

通过jsapi 加载程序仍然可用的 Google 图表版本不再持续更新。请从现在开始使用新的 gstatic 加载器。

使用新的库...

<script src="https://www.gstatic.com/charts/loader.js"></script>

将load 语句更改为...

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

编辑 2

您还可以在一个load 语句中加载您需要的所有包，例如
而不是...

google.charts.load('current', { 'packages': ['table'] });
google.charts.load('current', { 'packages': ['bar'] });
google.charts.load('current', { 'packages': ['pie'] });  // <-- 'pie' package does not exist
google.charts.load('current', { 'packages': ['corechart'] });
google.charts.setOnLoadCallback(drawCharts);

应该是……

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

【讨论】：

谢谢先生，看看这里：ideone.com/53kDM8 我遇到了同样的错误，我尝试了你的建议，但没有成功

【解决方案2】：

我收到了同样的信息，但只是因为我忘了加载包

  // was -> google.charts.load('current', {'packages':['bar', 'corechart']});
  google.charts.load('current', {'packages':['bar', 'corechart', 'table']});

【讨论】：

【解决方案3】：

即使您使用了正确的策略，即加载谷歌图表并在加载事件上使用回调，也有必要将脚本保留在 head 标签中，不像我们将脚本保留在底部以防止页面加载缓慢。

我直接从谷歌图表的文档中引用这个：

除了少数例外，所有带有 Google 图表的网页都应在网页的 <head> 中包含以下行：

<script src="https://www.gstatic.com/charts/loader.js"></script>
<script>
  google.charts.load('current', {packages: ['corechart']});
  google.charts.setOnLoadCallback(drawChart);
  ...
</script>

参考：Basic Chart Loading

P.S：我关注了每个细节，但错过了将加载脚本保留在 head 标签中，我连续收到此错误 TypeError: google.visualization.arrayToDataTable is not a function 。将脚本保留在 head 标签中解决了这个问题。

【讨论】：