如何在Google GeoCharts中直接显示Popularity数值而非仅国家名？

嘿，这个需求完全可以搞定！Google GeoChart的displayMode: 'text'默认只显示国家/地区名称，但我们有几种灵活的方式让它直接展示对应的Popularity数值，甚至可以同时显示名称和数值，下面给你详细说明：

方法一：直接修改数据列（最简单快速） #

直接把国家名称和Popularity数值合并到第一列，这样displayMode: 'text'就会直接显示合并后的文本：

var data = google.visualization.arrayToDataTable([
  ['Country', 'Popularity'],
  ['South America (600)', 600],
  ['Canada (500)', 500],
  ['France (600)', 600],
  ['Russia (700)', 700],
  ['Australia (600)', 600]
]);

var options = { displayMode: 'text' };

方法二：保留原始数据，用格式化显示文本 #

如果你不想修改原始的国家名称数据，可以通过setFormattedValue()方法给第一列设置自定义的显示文本，同时保留原始数据的完整性：

var data = google.visualization.arrayToDataTable([
  ['Country', 'Popularity'],
  ['South America', 600],
  ['Canada', 500],
  ['France', 600],
  ['Russia', 700],
  ['Australia', 600]
]);

// 遍历所有数据行，设置第一列的显示文本为“国家名(数值)”
for (let i = 0; i < data.getNumberOfRows(); i++) {
  const country = data.getValue(i, 0);
  const popularity = data.getValue(i, 1);
  data.setFormattedValue(i, 0, `${country} (${popularity})`);
}

var options = { displayMode: 'text' };

方法三：使用Annotation角色（更灵活的样式控制） #

如果需要单独控制数值文本的样式（比如字体大小、颜色），可以添加annotation数据角色，把Popularity数值放在这个角色列中，然后配置显示：

var data = google.visualization.arrayToDataTable([
  // 新增annotation角色列，用于显示数值
  ['Country', 'Popularity', {role: 'annotation'}],
  ['South America', 600, '600'],
  ['Canada', 500, '500'],
  ['France', 600, '600'],
  ['Russia', 700, '700'],
  ['Australia', 600, '600']
]);

var options = {
  displayMode: 'text',
  // 自定义主文本样式（国家名）
  textStyle: {
    fontSize: 14,
    color: '#2c3e50'
  },
  // 自定义annotation文本样式（数值）
  annotations: {
    textStyle: {
      fontSize: 12,
      color: '#e74c3c',
      bold: true
    }
  }
};

这种方式可以让你分别控制国家名称和数值的样式，视觉效果更丰富。

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