charts - GeoCharts 如何显示国家名称而不是代码

Question

我想用 google GeoChart 做一个可视化。我输入了国家代码。我想显示完整的国家名称，但只弹出国家代码。

google.charts.load('current', {
  'packages': ['geochart'],
  'mapsApiKey': 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY'
});
google.charts.setOnLoadCallback(drawRegionsMap);

function drawRegionsMap() {
  var data = google.visualization.arrayToDataTable([
    ['Country', 'Members'],
    ['LB', 3],
    ['JO', 2],
    ['IT', 24],
    ['PS', 3],
    ['LY', 1],
    ['TN', 6],
    ['LB', 3],
    ['EG', 2],
  ]);

  var options = {
    colorAxis: {
      colors: ['#c1c1cd', '#53556e']
    },
    legend: 'none'
  };

  var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));

  chart.draw(data, options);
}

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

Answer 1

使用对象表示法，
您可以提供值 (v:) 和格式化值 (f:)

{v: 'IT', f: 'Italy'}

工具提示默认会显示格式化后的值

使用对象表示法更新数据并提供名称作为格式化值

请参阅以下工作片段，
将鼠标悬停在意大利上方以查看结果...

google.charts.load('current', {
  'packages': ['geochart'],
  'mapsApiKey': 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY'
});
google.charts.setOnLoadCallback(drawRegionsMap);

function drawRegionsMap() {
  var data = google.visualization.arrayToDataTable([
    ['Country', 'Members'],
    ['LB', 3],
    ['JO', 2],
    [{v: 'IT', f: 'Italy'}, 24],
    ['PS', 3],
    ['LY', 1],
    ['TN', 6],
    ['LB', 3],
    ['EG', 2],
  ]);

  var options = {
    colorAxis: {
      colors: ['#c1c1cd', '#53556e']
    },
    legend: 'none'
  };

  var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));

  chart.draw(data, options);
}

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