Question

我希望使用Google的图表API显示世界地图（GeoChart），其中一些国家/地区按国家/地区列出，其他国家/地区则根据分组/地区显示。

我的数据可能如下所示：

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

这可能吗？我尝试使用选项的displayMode属性，但这没有任何好处。我也尝试使用＆＃34; 011＆＃34;而不是＆＃34;西非＆＃34;自＆＃34; 011＆＃34;被API认可为区域。这也不起作用。

我能够使用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;
}

完整示例

＆＃13;

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;
}

＆＃13;

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

＆＃13;

使用Google GeoChart显示西非

1 个答案: