Javascript 用单选按钮控制谷歌艺术_Javascript_Charts_Google Visualization

Javascript 用单选按钮控制谷歌艺术

javascript charts google-visualization

Javascript 用单选按钮控制谷歌艺术,javascript,charts,google-visualization,Javascript,Charts,Google Visualization,我想在我的网站上加入Google GeoArts，所以我加入了他们指南中的代码，一切都很顺利但是，我想在站点上添加几个单选按钮，它们可以控制图表上显示的区域我知道我需要在单击单选按钮时将变量区域从下面的代码“150”更改为单选按钮的值，但我对Javascript没有太多经验，我很想知道如何做到这一点多谢各位 function drawRegionsMap() { var data = google.visualization.arrayToDataTable(

我想在我的网站上加入Google GeoArts，所以我加入了他们指南中的代码，一切都很顺利

但是，我想在站点上添加几个单选按钮，它们可以控制图表上显示的区域

我知道我需要在单击单选按钮时将变量区域从下面的代码“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>

函数drawRegionsMap（）{
var data=google.visualization.arrayToDataTable([
[‘国家’、‘受欢迎程度’]，
[‘德国’，200]，
[‘美国’，300]，
[‘巴西’，400]，
[Canada'，500]，
['France'，600]，
['RU'，700]
]);
变量选项={
地区：'150'，
};
var chart=new google.visualization.geograpart（document.getElementById（'regions_div'））；
图表绘制（数据、选项）；
}

根据无线电输入更改图表的

选项非常简单
只需要找到区域输入并添加一个单击处理程序
然后获取单击的收音机的值
请参阅以下工作片段，默认情况下使用第一个无线电

google.charts.load（'current'{
回调：DrawRegionMap，
包装：[“地球艺术”]
});
函数drawRegionsMap（）{
var data=google.visualization.arrayToDataTable([
[‘国家’、‘受欢迎程度’]，
[‘德国’，200]，
[‘美国’，300]，
[‘巴西’，400]，
[Canada'，500]，
['France'，600]，
[RU'，700]，
[‘突尼斯’，220]，
[‘喀麦隆’，420]
]);
var chart=new google.visualization.geograpart（document.getElementById（'regions_div'））；
var选项={}；
//初始区域
var regions=document.getElementsByName（'region'）；
var defaultRegion=null；
对于（变量i=0；i0））{
defaultRegion=区域[0]；
defaultRegion.checked=true；
}
绘图图（{target:defaultRegion}）；
//“单击”处理程序上的收音机
功能绘图图（发送器）{
options.region=null；
如果（sender.target.value！=='all'）{
options.region=sender.target.value；
}
图表绘制（数据、选项）；
}
}

全部的
非洲
美洲
欧洲