javascript - 处理地理图表图表包装器中标记的事件

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)

接下来，由于最近的 problems，我正在使用卡住版本 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>