我一直在做一个小项目来制作一张 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);
})};
如果有经验的人可以帮助我正确设置一个有效的监听器,我将永远感激不已。
最佳答案
关于包装与常规,你是对的
图表包装器没有 '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>
关于javascript - 谷歌图表 : Registering a click on a GeoChart,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48199194/