Question

任何人都可以帮我为带有标记的geochart chartwrapper创建一个事件监听器吗？我的目标是在用户点击标记时发出警报。

我试过了

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

但到目前为止它不起作用。它不会抛出任何错误或任何错误。但是，我确实得到了“仪表板就绪”的消息。它只是第二个无法正常工作的事件。

任何线索？非常感谢：）

BTW pn_1指的是仪表板而pn_1_ch指的是chartwrapper对象:)

Answer 1

如果没有看到所有代码，有几件事要检查......

首先，GeoCharts需要两个加载器。（/loader.js和/jsapi）

接下来，由于最近problems，我使用了冻结版44。

至于处理事件，请在ChartWrapper上听取'ready'事件触发后，您可以通过.getChart()访问GeoChart，以便收听'select'事件。

使用Dashboards时，只要重新绘制图表，就会触发'ready'事件在这里，我从ChartWrapper中删除了该事件，以避免在应用NumberRangeFilter时添加重复的'select'个侦听器...

＆＃13;

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

＆＃13;

<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>

＆＃13;

处理geochart chartwrapper中标记的事件

1 个答案: