向使用標記的Google地理圖表添加事件監聽器

Question

目前，我在與Google geochart進行斗爭。 我正在嘗試向使用標記顯示世界國家的地理圖表添加事件偵聽器，並且當用戶單擊標記時，它將加載特定於國家/地區的數據。 除了事件監聽器，我的代碼運行良好。 現在，我知道當我使用chartwrapper對象時，一旦加載了儀表板事件偵聽器，就必須添加兩個事件偵聽器，一個用於儀表板，一個用於圖表。 當我使用區域而不是標記時，我設法使代碼正常工作，但是對於標記，我無法使其正常工作。 通常，它應該是同一事件，基本上是“選擇”，但我無法使其正常工作。 我已經發布了完整的代碼供您獲取全局圖片，但您可能應該只專注於事件偵聽器和關聯的tableSelectHandler（）函數。 到目前為止，我已經嘗試過刪除函數中的所有代碼，並僅顯示一般警報，但即使這樣也無法正常工作。 請幫助 ！ 非常感謝

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

};

Answer 1

我認為這是問題出處：

     //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");
}); 

看來以這種方式編寫代碼對我來說總是更好。