如何在Google GeoChart中显示国家名称而非国家代码

嘿，这个问题我之前帮不少开发者处理过，其实Google GeoChart本身就支持关联国家代码和全名，核心是给数据集补充全名信息，再配置工具提示的显示规则就行，具体操作如下：

• 第一步：给数据集添加国家全名列
  不管你是用数组直接定义数据，还是从外部数据源导入，都要在现有数据里新增一列用来存储国家的完整名称。比如原来的数据集是：

  [['Country Code', '数值'], ['US', 100], ['CN', 200]]
  

  要改成包含全名的版本：

  [['Country Code', '数值', 'Country Name'], ['US', 100, 'United States'], ['CN', 200, 'China']]
  

• 第二步：配置工具提示显示全名
  在GeoChart的配置选项里，通过tooltip属性指定要显示的内容。有两种常用方式：

  1. 直接指定列内容：如果只是想显示全名，可以设置工具提示使用第三列的内容：

     var options = {
       tooltip: {
         // 直接将第三列作为工具提示内容
         text: function(row) {
           return data.getValue(row, 2);
         }
       }
     };
     

  2. 自定义HTML格式：如果想要更美观的格式（比如同时显示数值和全名），可以开启HTML模式并自定义格式化函数：

     var options = {
       tooltip: {
         isHtml: true,
         formatter: function(row, col, value) {
           const countryName = data.getValue(row, 2);
           return `<div style="padding:8px;">
                     <strong>${countryName}</strong><br>
                     数值: ${value}
                   </div>`;
         }
       }
     };
     

• 进阶：批量转换代码到全名
  如果你的数据集很大，手动添加全名太麻烦，可以维护一个国家代码与全名的映射对象，自动填充全名列：

  // 定义代码-名称映射表（可以根据需求扩展）
  const countryMap = {
    'US': 'United States',
    'CN': 'China',
    'IN': 'India',
    'ID': 'Indonesia',
    'PK': 'Pakistan'
  };
  
  // 原始数据（仅包含代码和数值）
  const rawData = [['US', 100], ['CN', 200], ['IN', 150]];
  
  // 构建带全名的数据集
  const fullData = [['Country Code', '数值', 'Country Name']].concat(
    rawData.map(item => [item[0], item[1], countryMap[item[0]]])
  );
  

• 注意事项

  • 确保你使用的国家代码是ISO 3166-1 alpha-2格式（两位字母），这是Google GeoChart默认识别的代码标准，避免出现识别错误。
  • 如果是通过Google Sheets作为数据源，只需在表格中新增一列输入国家全名，然后在GeoChart的配置面板里，将工具提示的数据源选择为这一列即可。

内容的提问来源于stack exchange，提问作者Anjo