TypeError：google.visualization.DataTable不是构造函数 [英] TypeError: google.visualization.DataTable is not a constructor

问题描述

在我的网页上，我有一张谷歌地图，以及三张图表。当页面加载时，地图很好，但图表要么不加载，要么只加载一两个。继续收到错误TypeError：google.visualization.DataTable不是构造函数。

On my web page I have a google map, as well as three charts. When the page loads the map is fine, but the charts either don't load or only one or two do. Keep getting the error 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); 

          });
      }  

推荐答案

我不认为你可以添加多个这样的回调。

I don't think you can add more than one callback like that.

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

Also, you can define the callback in the load method, like so...

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

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

---

编辑

以上加载语句适用于旧版库...

the above load statement is for the older library...

< script src =http://www.google.com/jsapi>< / script> ，$ c>

发行说明 ...

according to the release notes...

通过 jsapi 加载程序不再一致地更新。从现在开始请使用新的gstatic装载机。

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 语句中加载所需的所有包，例如

...

you can also load all the packages you need in one load statement, e.g.
instead of...

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

它应该是......

it should be...

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

这篇关于TypeError：google.visualization.DataTable不是构造函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！