geochart地区可点击的网址

Question

我们希望在我们的网站上嵌入一个非常基本的交互式地图,点击一个区域将带您到我们网站上的特定页面.我们想在谷歌geochart中使用这些地区

这是我们正在使用的地图 https://jsfiddle.net/tyvnfxf4/

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

  function drawRegionsMap() {

    var data = google.visualization.arrayToDataTable([
      ['Country', 'Popularity'],
      ['England', 400],
      ['Wales', 300],
      ['Scotland', 400],
      ['Ireland', 600],

    ]);

    var options = {
      region: 'GB',

      resolution: 'provinces',
    };

    var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));

    chart.draw(data, options);
  }

我们希望:威尔士可以链接到www.example.com/wales Ireland以链接到www.example.com/ireland等

有什么帮助吗？

非常感谢

Answer 1

有许多方法可以处理,但关键是使用该'select'事件

请记住,在'select'选择和取消选择某些内容时会触发该事件,
因此请确保length > 0

建议使用列DataTable来存储URL

使用a DataView来隐藏图表中的列

然后根据chart选择 获取URL

请参阅以下工作代码段...

google.charts.load('current', {
  callback: 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 options = {
      region: 'GB',
      resolution: 'provinces'
    };

    var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));

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

    chart.draw(view, options);
  },
  packages:['geochart']
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://www.google.com/jsapi"></script>
<div id="regions_div" style="width: 600px; height: 500px;"></div>