ТипError: google.visualization.DataTable не является конструктором

Question

На моей веб-странице у меня есть карта google, а также три диаграммы. Когда страница загружает карту в порядке, но диаграммы либо не загружаются, либо только один или два. Продолжайте получать ошибку TypeError: google.visualization.DataTable не является конструктором.

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

      }); 
     } 

Answer 1

Я не думаю, что вы можете добавить более одного обратного вызова.

Кроме того, вы можете определить функцию обратного вызова в методе load, как так ...

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

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

---

EDIT

выше 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}); 

---

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

Answer 2

я получил то же самое сообщение, но только потому, что я забыл загрузить пакет

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