在我的网页上，我有一个谷歌地图，以及三个图表。当页面加载 map 时， map 很好，但图表要么不加载，要么只有一两个图表加载。继续收到错误 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); 

          });
      }  

最佳答案

我认为您不能添加多个这样的回调。

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

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

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

编辑

以上load声明是针对旧库...

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

根据release notes ...

The version of Google Charts that remains available via the jsapi loader is no longer being updated consistently. Please use the new gstatic loader from now on.

使用新库...

<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']
});

关于javascript - TypeError : google. visualization.DataTable 不是构造函数，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32458437/