类型错误:google.visualization.DataTable 不是构造函数 [英] TypeError: google.visualization.DataTable is not a constructor

问题描述

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

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

<小时>

编辑

上面的load 语句是针对旧的 库...

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

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

根据发行说明...

通过 jsapi 加载器保持可用的 Google Charts 版本不再持续更新.请从现在开始使用新的 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 语句更改为...

changes the load statement to...

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

应该是……

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

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