使用Google GeoChart顯示西非

Question

我想使用Google的Chart API顯示世界地圖（GeoChart），其中某些國家/地區按國家/地區列出，而其他國家/地區則根據分組/區域進行顯示。

我的數據可能如下所示：

[["Country","DataValue"],["United States",2000],["West Africa",3000],["Great Britain",1500]];

這可能嗎？ 我嘗試使用選項的displayMode屬性，但這沒有任何好處。 我還嘗試使用“ 011”代替“西非”，因為API識別為“ 011”。 那也不起作用。

使用region選項，我只能顯示西非地區，但這不是我想要的。 我確實想展示世界，但是像西非這樣的地區卻作為一個整體而不是單個國家來處理和着色。

謝謝你的幫助。

Answer 1

Google Geochart支持整個世界或特定區域（例如011 Western Africa ）

自您的目標以來：

展示世界，但像西非這樣的區域作為一個整體而不是單個國家來處理和着色

我將提出以下解決方案：將某個地區的數據表行動態擴展為該地區每個國家/地區的行：

function expandRegions(dataTable) {
    var regions = {
        'West Africa': {
            '204': 'Benin',
            '854': 'Burkina Faso',
            '132': 'Cabo Verde',
            '384': "Cote d'Ivoire",
            '270': 'Gambia',
            '288': 'Ghana',
            '324': 'Guinea',
            '624': 'Guinea-Bissau',
            '430': 'Liberia',
            '466': 'Mali',
            '478': 'Mauritania',
            '562': 'Niger',
            '566': 'Nigeria',
            '654': 'Saint Helena',
            '686': 'Senegal',
            '694': 'Sierra Leone',
            '768': 'Togo'
        }
    };


    for (var i = 0; i < dataTable.getNumberOfRows(); i++) {
        var regionName = dataTable.getValue(i, 0);
        var region = regions[regionName];
        if (region) {
            var value = dataTable.getValue(i, 1);
            dataTable.removeRow(i); //remove region row
            //add countries from region rows 
            for (var code in region) {
                var countryName = region[code];
                dataTable.addRow([countryName, value]);
            }
        }
    }
    return dataTable;
}

完整的例子

 google.load("visualization", "1", { packages: ["geochart"] }); google.setOnLoadCallback(drawRegionsMap); function drawRegionsMap() { var data = google.visualization.arrayToDataTable([ ["Country","DataValue"], ["United States",2000], ["West Africa",3000], ["Great Britain",1500] ]); data = expandRegions(data); var options = { }; var chart = new google.visualization.GeoChart(document.getElementById('regions_div')); chart.draw(data, options); } function expandRegions(dataTable) { var regions = { 'West Africa': { '204': 'Benin', '854': 'Burkina Faso', '132': 'Cabo Verde', '384': "Cote d'Ivoire", '270': 'Gambia', '288': 'Ghana', '324': 'Guinea', '624': 'Guinea-Bissau', '430': 'Liberia', '466': 'Mali', '478': 'Mauritania', '562': 'Niger', '566': 'Nigeria', '654': 'Saint Helena', '686': 'Senegal', '694': 'Sierra Leone', '768': 'Togo' } }; for (var i = 0; i < dataTable.getNumberOfRows(); i++) { var regionName = dataTable.getValue(i, 0); var region = regions[regionName]; if (region) { var value = dataTable.getValue(i, 1); dataTable.removeRow(i); for (var code in region) { var countryName = region[code]; dataTable.addRow([countryName, value]); } } } return dataTable; } 

 <script type="text/javascript" src="https://www.google.com/jsapi"></script> <div id="regions_div" style="width: 900px; height: 500px;"></div>