使用單選按鈕控制Google Geocharts

我想將Google Geocharts加入我的網站，因此我將他們的準則中的代碼包含在內，並且一切正常。使用單選按鈕控制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>

來源

2017-02-14 Pixeluz

更改圖表基於射頻輸入的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>

來源

2017-02-16 01:14:17 WhiteHat

使用單選按鈕控制Google Geocharts

回答

相關問題