无法读取Google Geo Charts中未定义的属性'arrayToDataTable' [英] Cannot read property 'arrayToDataTable' of undefined at Google Geo Charts
问题描述
所以这是我在index.html上设置的. api密钥已在console.developers.google.com
处生成,我不认为这引起了错误.
问题是arrayToDataTable
是未定义的,我将它放在index.html上只是为了测试它是否可以工作,但是在我的实际应用程序中,它已分离为一个组件.
so this is my set up on my index.html. the api key has been generated at console.developers.google.com
and I don't think that it was causing an error.
the problem is the arrayToDataTable
is undefined, I put it on my index.html just to test if this would work but in my real apps it was separated to a component.
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script>
google.charts.load('current', {
'packages': ['geochart'],
'mapsApiKey': 'AIzaSyC1PKyylEm8Xe0l0fnv81tuuUS-eOlrRCQ'
});
google.charts.setOnLoadCallback(drawStuff());
function drawStuff() {
var MapData = google.visualization.arrayToDataTable([
["Code", "Name", "Value"],
["PH-14", "Autonomous Region in Muslim Mindanao (ARMM)", 1],
["PH-05", "Bicol (Region V)", 2],
["PH-02", "Cagayan Valley (Region II)", 3],
["PH-40", "Calabarzon (Region IV-A)",4 ],
["PH-13", "Caraga (Region XIII)", 5],
["PH-03", "Central Luzon (Region III)", 6],
["PH-07", "Central Visayas (Region VII)", 7],
["PH-15", "Cordillera Administrative Region (CAR)", 8],
["PH-11", "Davao (Region XI)", 9],
["PH-08", "Eastern Visayas (Region VIII)", 10],
["PH-01", "Ilocos (Region I)", 11],
["PH-41", "Mimaropa (Region IV-B)", 12],
["PH-00", "National Capital Region Pambansang Punong", 13],
["PH-10", "Northern Mindanao (Region X)", 14],
["PH-12", "Soccsksargen (Region XII)", 15],
["PH-06", "Western Visayas (Region VI)", 16],
["PH-09", "Zamboanga Peninsula (Region IX)", 17]
]);
console.log(MapData);
// Set chart options
var MapOptions = {
'region': 'PH',
'resolution': 'provinces',
'title': 'How Much Pizza I Ate Last Night',
'width': 400,
'height': 300
};
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.GeoChart(document.getElementById('chartdiv'));
chart.draw(MapData, MapOptions);
};
</script>
我真的不知道设置中缺少什么.
I really don't know what's missing in the set up.
推荐答案
首先,删除...中的括号.
First, remove the parentheses in ...
google.charts.setOnLoadCallback(drawStuff) // not drawStuff()
当带有括号时,您将传递调用函数的结果,但是API希望被赋予一个处理函数(而不是其结果).
When you have the parenthesis, you are passing the result of calling the function, but the API wants to be given a handler function (not its result).
此外,而不是...
["Code", "Name", "Value"],
...尝试使用标签语法,就像这样...
...try using the label syntax, like so...
[{label: 'Code', type: 'string'},
{label: 'Name', type: 'string'},
{label: 'Value', type: 'number'}],
API应该能够在不进行此更改的情况下解决问题,但这是按需提供"的更改,它也使代码更具自记录性.
The API should be able to figure it out without this change, but this is a "just-in-case-its-needed" sort of change that also makes the code more self-documenting.
这篇关于无法读取Google Geo Charts中未定义的属性'arrayToDataTable'的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!