geochart region clickable urls

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 愛爾蘭鏈接到www.example.com/ireland 等

可以有幫助嗎？

非常感謝

Answer 1

有許多的方式來處理，但關鍵是使用'select'事件

記住，在'select'事件被觸發時都選擇了一些東西，去選擇，
所以一定要確保length > 0

建議在DataTable使用列存儲的URL

使用DataView從圖表隱藏的列

然後得到一個基於chart選擇

看到下面的工作片段網址...

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>