類型錯誤：google.visualization.DataTable 不是構造函數

Question

在我的網頁上，我有一張谷歌地圖和三個圖表。 當頁面加載地圖時，地圖很好，但圖表要么不加載，要么只有一兩個。 不斷收到錯誤 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); 

          });
      }

Answer 1

我認為您不能添加多個這樣的回調。

此外，您可以在load方法中定義回調，就像這樣......

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

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

編輯

上面的load語句適用於較舊的庫...

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

根據發行說明...

通過jsapi加載器保持可用的 Google Charts 版本不再持續更新。 請從現在開始使用新的 gstatic 加載器。

使用新庫...

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

將load語句更改為...

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

編輯 2

您還可以在一個load語句中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']});

Answer 3

即使您使用正確的策略，即加載谷歌圖表並在加載事件上使用回調，也有必要將腳本保留在 head 標記中，這與我們將腳本保留在底部以防止頁面加載緩慢不同。

我直接從谷歌圖表的文檔中引用了這一點：

除了少數例外，所有帶有 Google Charts 的網頁都應該在網頁的<head>中包含以下幾行：

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

參考：基本圖表加載

PS：我遵循了每個細節，但沒有將加載腳本保留在 head 標記中，我連續收到此錯誤TypeError: google.visualization.arrayToDataTable is not a function 。 將腳本保留在 head 標簽中解決了這個問題。

類型錯誤：google.visualization.DataTable 不是構造函數

問題描述

3 個解決方案

解決方案1
19 已采納 2015-09-08 13:58:27

解決方案2
9 2018-03-09 18:54:29

解決方案3
0 2021-03-08 12:54:53

類型錯誤：google.visualization.DataTable 不是構造函數

問題描述

3 個解決方案

解決方案1 19 已采納 2015-09-08 13:58:27

解決方案2 9 2018-03-09 18:54:29

解決方案3 0 2021-03-08 12:54:53

解決方案1
19 已采納 2015-09-08 13:58:27

解決方案2
9 2018-03-09 18:54:29

解決方案3
0 2021-03-08 12:54:53