處理地理圖表圖表包裝器中標記的事件

Question

任何人都可以幫助我為帶有標記的地理圖表圖表包裝器創建事件偵聽器嗎？ 我的目標是在用戶點擊標記時發出警報。

我試過了

  google.visualization.events.addListener(pn_1,'ready', function(){
     console.log('dashboard is ready');     
     google.visualization.events.addListener(pn_1_ch,'select',function(){    
        alert('Some random alert');
     });    
  });

但到目前為止它不起作用。 它不會引發任何錯誤或任何錯誤。 但是我確實收到了“儀表板已准備好”的消息。 只有第二個事件偵聽器不起作用。

任何線索？ 非常感謝 ：）

順便說一句， pn_1 指的是儀表板， pn_1_ch 指的是圖表包裝器對象 :)

Answer 1

在沒有看到所有代碼的情況下，有幾件事需要檢查......

首先， GeoCharts需要兩個加載器。 ( /loader.js和/jsapi )

接下來，由於最近的問題，我使用的是凍結版本44 。

至於處理事件，請監聽ChartWrapper上的'ready'事件。
觸發后，您可以通過.getChart()訪問 GeoChart 以偵聽'select'事件。

使用Dashboards ，在重新繪制圖表時會觸發'ready'事件。
在這里，我從 ChartWrapper 中刪除了事件，以避免在應用NumberRangeFilter時添加重復的'select'偵聽器...

 google.charts.load('44', { callback: drawDashboard, packages: ['controls', 'corechart', 'geochart'] }); function drawDashboard() { var msgDiv = document.getElementById('message_div'); var data = google.visualization.arrayToDataTable([ ['City', 'Population', 'Area'], ['Rome', 2761477, 1285.31], ['Milan', 1324110, 181.76], ['Naples', 959574, 117.27], ['Turin', 907563, 130.17], ['Palermo', 655875, 158.9], ['Genoa', 607906, 243.60], ['Bologna', 380181, 140.7], ['Florence', 371282, 102.41], ['Fiumicino', 67370, 213.44], ['Anzio', 52192, 43.43], ['Ciampino', 38262, 11] ]); var dashboard = new google.visualization.Dashboard( document.getElementById('dashboard_div')); var rangeSlider = new google.visualization.ControlWrapper({ controlType: 'NumberRangeFilter', containerId: 'filter_div', options: { filterColumnLabel: 'Area' } }); var geoChart = new google.visualization.ChartWrapper({ chartType: 'GeoChart', containerId: 'chart_div', options: { region: 'IT', displayMode: 'markers', colorAxis: {colors: ['green', 'blue']} } }); // listen for 'ready' event on ChartWrapper google.visualization.events.addListener(geoChart, 'ready', function () { // remove 'ready' listener to avoid adding multiple 'select' events google.visualization.events.removeAllListeners(geoChart); msgDiv.innerHTML += 'ChartWrapper Ready<br/>'; // listen for 'select' event on GeoChart google.visualization.events.addListener(geoChart.getChart(), 'select', function () { msgDiv.innerHTML += 'GeoChart Selected - ' + JSON.stringify(geoChart.getChart().getSelection()) + '<br/>'; }); }); dashboard.bind(rangeSlider, geoChart); dashboard.draw(data); }

 <script src="https://www.gstatic.com/charts/loader.js"></script> <script src="https://www.google.com/jsapi"></script> <div id="dashboard_div"> <div id="filter_div"></div> <div id="chart_div"></div> <div id="message_div"></div> </div>