类型错误：google.visualization.DataTable 不是构造函数
[英]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.不断收到错误 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);
});
}
3 个解决方案
解决方案1
19 已采纳 2015-09-08 13:58:27
I don't think you can add more than one callback like that.我认为您不能添加多个这样的回调。
Also, you can define the callback in the load method, like so...此外，您可以在load方法中定义回调，就像这样......
google.load('visualization', '1.0', {'packages':['corechart'], 'callback': drawCharts});
function drawCharts() {
drawAltitudeChart();
drawDisplacementChart();
drawDistanceChart();
}
EDIT编辑
the above load statement is for the older library...上面的load语句适用于较旧的库...
<script src="http://www.google.com/jsapi"></script>
according to the release notes ...根据发行说明...
The version of Google Charts that remains available via the
jsapiloader is no longer being updated consistently.jsapi加载器保持可用的 Google Charts 版本不再持续更新。 Please use the new gstatic loader from now on.
using the new library...使用新库...
<script src="https://www.gstatic.com/charts/loader.js"></script>
changes the load statement to...将load语句更改为...
google.charts.load('current', {'packages': ['corechart'], 'callback': drawCharts});
EDIT 2编辑 2
you can also load all the packages you need in one load statement, eg您还可以在一个load语句中load您需要的所有包，例如
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']
});
解决方案2
9 2018-03-09 18:54:29
I got the same message, but just because I forgot to load the package我收到了同样的消息，但只是因为我忘记加载包
// was -> google.charts.load('current', {'packages':['bar', 'corechart']});
google.charts.load('current', {'packages':['bar', 'corechart', 'table']});
解决方案3
0 2021-03-08 12:54:53
Even if you are using the right strategy ie loading google charts and using callbacks on the load event, it is necessary to keep the scripts in the head tag unlike we keep the scripts at the bottom to prevent slow page load.即使您使用正确的策略，即加载谷歌图表并在加载事件上使用回调，也有必要将脚本保留在 head 标记中，这与我们将脚本保留在底部以防止页面加载缓慢不同。
I am quoting this directly from documentation of google charts:我直接从谷歌图表的文档中引用了这一点：
With few exceptions, all web pages with Google Charts should include the following lines in the <head> of the web page:除了少数例外，所有带有 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>
Reference: Basic Chart Loading参考： 基本图表加载
PS: I followed each detail but missed to keep the loading scripts in head tag, i got this error coninuously TypeError: google.visualization.arrayToDataTable is not a function . PS：我遵循了每个细节，但没有将加载脚本保留在 head 标记中，我连续收到此错误TypeError: google.visualization.arrayToDataTable is not a function 。 Keeping the scripts in head tag resolved the issue.将脚本保留在 head 标签中解决了这个问题。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.