Question

我想在我的网站上加入Google Geocharts，因此我将其指南中的代码包含在内，并且一切顺利。

但是，我想在网站上添加几个单选按钮，这将控制图表上显示的区域。

我知道我需要从＆＃39; 150＆＃39;以下的代码中更改变量区域。点击单选按钮的价值，但我对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>

Answer 1

根据无线电输入更改图表的options非常简单

只需找到区域输入并添加点击处理程序

然后获取被点击的无线电的值

请参阅以下工作代码段，默认情况下使用第一个广播...

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>

使用单选按钮控制Google Geocharts

1 个答案: