ラジオボタンでGoogle Geochartsを制御する

私は自分のサイトにGoogle Geochartsを組み込みたいので、ガイドラインのコードを含めてみました。ラジオボタンでGoogle Geochartsを制御する

しかし、サイトにはラジオボタンをいくつか追加してチャートに表示されている領域を制御したいと考えています。

私はそれをクリックすると、下のコードから '150'をラジオボタンの値に変更する必要があることを理解していますが、Javascriptでの経験はあまりなく、私はそれを行うことができます。

ありがとうございます。ラジオ入力に基づいてチャートのoptionsを変更

 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>

出典

2017-02-14 Pixeluz

は非常に簡単です

はちょうど地域の入力を見つけてクリックハンドラ

を追加する必要があり、その後

をクリックされたラジオの値を取得

最初のラジオをデフォルトで使用する次の作業スニペットを参照してください。

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>

出典

2017-02-16 01:14:17 WhiteHat

ラジオボタンでGoogle Geochartsを制御する

答えて

関連する問題