javascript - 谷歌图表 : Registering a click on a GeoChart

Question

我一直在做一个小项目来制作一张 map ，在这个例子中是荷兰，上面有一堆标记。数据通过 CSV 提供，我通过仪表板链接了图表和 slider 。

到目前为止，它运行良好，但是我在下一个功能上遇到了问题:注册对标记的点击，然后根据点击的标记将用户引导至不同的网页。

我已经尝试了很多次让它工作，但我相信这与我使用的是 chartWrappers 而不是普通图表这一事实有关。

这是我当前的代码:

 google.charts.load('current', {
   'packages':['geochart', 'controls'],
   });
   google.charts.setOnLoadCallback(drawMarkersMap);

   function drawMarkersMap() {
      $.get("output.csv", function(csvString) {
         var arrayData = $.csv.toArrays(csvString, {onParseValue: $.csv.hooks.castToScalar});
         var data = google.visualization.arrayToDataTable(arrayData)
         var dashboard = new google.visualization.Dashboard(document.getElementById('controls_div'));

         var Slider = new google.visualization.ControlWrapper({
            controlType: 'NumberRangeFilter',
            containerId: 'controls_div',
            options: {
                filterColumnLabel: data.getColumnLabel(1)
            } 
          });

         var GeoChart = new google.visualization.ChartWrapper({
            chartType: 'GeoChart',
            containerId: 'chart_div',
            options: {
                region: 'NL',
                displayMode: 'markers',
                resolution: 'provinces',
                colorAxis: {colors: ['green', 'blue']}
            }
          });

          google.visualization.events.addListener(GeoChart, 'select', function() {
          var selection = GeoChart.getChart().getSelection();
          //Above line doesn't work. Console also returns that getSelection property is null.
         });

         dashboard.bind(Slider, GeoChart);

         dashboard.draw(data);

    })};

如果有经验的人可以帮助我正确设置一个有效的监听器，我将永远感激不已。

Answer 1

关于包装与常规，你是对的

图表包装器没有 'select' 的事件

你必须等到包装器'ready',
然后在图表上监听'select'，
看下面的片段……

google.visualization.events.addListener(GeoChart, 'ready', function() {
  google.visualization.events.addListener(GeoChart.getChart(), 'select', function() {
    var selection = GeoChart.getChart().getSelection();
  });
});

---

请参阅以下工作片段...

google.charts.load('current', {
  packages:['controls', 'geochart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['Country', 'Popularity', 'Domain'],
    ['England', 400, 'www.example.com/England'],
    ['Wales', 300, 'www.example.com/Wales'],
    ['Scotland', 400, 'www.example.com/Scotland'],
    ['Ireland', 600, 'www.example.com/Ireland'],
  ]);

  var view = new google.visualization.DataView(data);
  view.setColumns([0, 1]);

  var GeoChart = new google.visualization.ChartWrapper({
    chartType: 'GeoChart',
    containerId: 'chart_div',
    dataTable: view,
    options: {
      region: 'GB',
      displayMode: 'markers',
      resolution: 'provinces',
      colorAxis: {colors: ['green', 'blue']}
    }
  });

  google.visualization.events.addListener(GeoChart, 'ready', function () {
    google.visualization.events.addListener(GeoChart.getChart(), 'select', function () {
      var selection = GeoChart.getChart().getSelection();
      if (selection.length > 0) {
        console.log(data.getValue(selection[0].row, 2));
        //window.open('http://' + data.getValue(selection[0].row, 2), '_blank');
      }
    });
  });

  GeoChart.draw();
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>