我想将 Google Geocharts 合并到我的网站上，因此我包含了他们指南中的代码，一切运行顺利。
但是，我想向网站添加几个单选按钮，这将控制图表上显示的区域。
我知道我需要在单击时将下面代码中的变量区域从“150”更改为单选按钮的值，但我对 Javascript 没有太多经验，并且希望得到一些指导可以做到这一点。
谢谢。
function drawRegionsMap() {
var data = google.visualization.arrayToDataTable([
['Country', 'Popularity'],
['Germany', 200],
['United States', 300],
['Brazil', 400],
['Canada', 500],
['France', 600],
['RU', 700]
]);
var options = {
region: '150',
};
var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="regions_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
最佳答案
根据 radio 输入更改图表的选项非常简单
只需要找到区域输入并添加点击处理程序
然后获取被点击的单选按钮的值
请参阅以下工作片段，默认情况下使用第一个 radio ...
google.charts.load('current', {
callback: drawRegionsMap,
packages: ['geochart']
});
function drawRegionsMap() {
var data = google.visualization.arrayToDataTable([
['Country', 'Popularity'],
['Germany', 200],
['United States', 300],
['Brazil', 400],
['Canada', 500],
['France', 600],
['RU', 700],
['Tunisia', 220],
['Cameroon', 420]
]);
var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));
var options = {};
// init regions
var regions = document.getElementsByName('region');
var defaultRegion = null;
for (var i = 0; i < regions.length; i++) {
regions[i].addEventListener('click', drawChart, false);
if (regions[i].checked) {
defaultRegion = regions[i];
}
}
if ((defaultRegion === null) && (regions.length > 0)) {
defaultRegion = regions[0];
defaultRegion.checked = true;
}
drawChart({target: defaultRegion});
// radio on 'click' handler
function drawChart(sender) {
options.region = null;
if (sender.target.value !== 'all') {
options.region = sender.target.value;
}
chart.draw(data, options);
}
}<script src="https://www.gstatic.com/charts/loader.js"></script>
<div><input type="radio" name="region" id="all" value="all" /><label for="all">All</label></div>
<div><input type="radio" name="region" id="africa" value="002" /><label for="africa">Africa</label></div>
<div><input type="radio" name="region" id="americas" value="019" /><label for="americas">Americas</label></div>
<div><input type="radio" name="region" id="europe" value="150" /><label for="europe">Europe</label></div>
<div id="regions_div"></div>关于javascript - 使用单选按钮控制 Google Geocharts，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42228043/