Javascript 将事件侦听器添加到使用标记的GoogleArt
我现在在谷歌艺术上有点挣扎。我正在尝试将事件侦听器添加到使用标记来显示世界国家的geochart中,当用户单击标记时,它将加载特定于国家的数据。除了事件侦听器之外,我的代码运行良好。现在,我知道当我使用chartwrapper对象时,我必须添加两个事件监听器,一个用于仪表板,一个用于仪表板事件监听器加载后的图表。当我使用区域而不是标记时,我成功地使代码工作,但对于标记,我无法使其工作。正常情况下,它应该是同一个事件,基本上是“选择”,但我无法让它工作。为了让您了解全局情况,我已经发布了我的全部代码,但是您可能应该只关注事件侦听器和相关的tableSelectHandler函数。到目前为止,我已经尝试删除函数中的所有代码,只显示一个通用警报,但即使这样也不起作用。救命啊!非常感谢Javascript 将事件侦听器添加到使用标记的GoogleArt,javascript,jquery,google-maps,google-maps-api-3,Javascript,Jquery,Google Maps,Google Maps Api 3,我现在在谷歌艺术上有点挣扎。我正在尝试将事件侦听器添加到使用标记来显示世界国家的geochart中,当用户单击标记时,它将加载特定于国家的数据。除了事件侦听器之外,我的代码运行良好。现在,我知道当我使用chartwrapper对象时,我必须添加两个事件监听器,一个用于仪表板,一个用于仪表板事件监听器加载后的图表。当我使用区域而不是标记时,我成功地使代码工作,但对于标记,我无法使其工作。正常情况下,它应该是同一个事件,基本上是“选择”,但我无法让它工作。为了让您了解全局情况,我已经发布了我的全部代
var script_url = [
'/SymphonyAdminPanel/php/SQLSRV/finalshareByCountry.php',
'/SymphonyAdminPanel/php/SQLSRV/countryData.php',
'/SymphonyAdminPanel/php/salesdata.php'
];
var pn_1_data = null; //pn_1 datatable
var pn_1 = null; // pn_1 div
var pn_1_filter = null; // pn_1 filter
var pn_1_ch = null; // pn_1 chart
function pn_1_draw() {
// Create a dashboard.
pn_1 = new google.visualization.Dashboard(document.getElementById('pn_1'));
// Create a filter for our datatable
pn_1_filter = new google.visualization.ControlWrapper({
'controlType': 'NumberRangeFilter',
'containerId': 'pn_1_filter',
'options': {
'filterColumnIndex': 1, //Use filterColumIndex here & not filtercolumnIndex
}
});
// Chart wrapper object
pn_1_ch = new google.visualization.ChartWrapper({
'chartType' : 'GeoMap',
'containerId' : 'pn_1_ch',
'options': {
'dataMode' : 'markers',
'region' : 'world',
'fontName': 'Arimo',
'width': 900,
'height' : 500
}
});
//We bind the elements to our dashboard
pn_1.bind(pn_1_filter, pn_1_ch);
// Load Json data from server, create datatable & draw charts
$.getJSON(script_url[0], function(jresults){
//We use the datatable declared earlier and assign it our $.getJson object
pn_1_data = new google.visualization.DataTable(jresults.data);
//We draw the whole dashboard object and its bound elements
pn_1.draw(pn_1_data);
//We add an event listener to our dashboard which adds an event listener to the bound chart
google.visualization.events.addListener(pn_1, 'ready', function(){
google.visualization.events.addListener(pn_1_ch,'select', tableSelectHandler);
});
});
};
function tableSelectHandler(){
/*var selectedItem = pn_1_ch.getChart().getSelection()[0];
var country = pn_1_data.getValue(selectedItem.row, 2);
//Set the geochart region to the country selected
pn_1_ch.setOption('region',country);
//Load new JSON data
var url_updated = '/SymphonyAdminPanel/php/SQLSRV/countryData.php?&country='+country;
$.getJSON(url_updated, function(jresults){
pn_1_data = new google.visualization.DataTable(jresults.data);
pn_1.draw(pn_1_data);
}); */
alert('Its working');
};
我认为这就是问题的根源:
//We add an event listener to our dashboard which adds an event listener to the bound chart
google.visualization.events.addListener(pn_1, 'ready', function(){
google.visualization.events.addListener(pn_1_ch,'select', tableSelectHandler);
});
您正在添加一个事件侦听器,它会等待pn_1准备就绪,以便向pn_1_ch添加另一个事件侦听器。我认为这可能会干扰整个代码。也许你应该尝试单独添加事件。
另外,一开始不要在addListener之外定义函数,只是为了查看函数是否正常工作。试试这个:
google.visualization.events.addListener(pn_1, 'ready', function(){ /*...*/ });
google.visualization.events.addListener(pn_1_ch,'select', function(){
alert("this is working");
});
这样写代码对我来说似乎更有效 在调用pn_1之前,请尝试为pn_1添加就绪侦听器。drawpn_1_数据我尝试过,并编辑了tableSelectHandler函数,使其仅显示一个警报“正在工作”;^^但是到目前为止没有结果,也没有错误消息。您是否正在尝试创建一个与页面中的示例类似的onselect侦听器?试着设置地图本身的选择事件,而不是图表包装器。你能详细说明一下吗?我不知道如何做到这一点,但这样做的问题是“选择”事件侦听器随后绑定到尚未创建的对象。不幸的是,你不能像google.visualization.events.addListenerpn_1_ch那样做,'ready',函数{google.visualization.events.addListenerpn_1_ch,'select',tableSelectHandler;};