GeoCharts如何显示国家/地区名称而不是代码

Question

我想用谷歌GeoChart进行可视化。我输入了国家代码。我想显示完整的国家/地区名称，但只会弹出国家/地区代码。

if #available(iOS 11.0, *) {
    self.tableView.contentInsetAdjustmentBehavior = .never
} else {
    self.automaticallyAdjustsScrollViewInsets = false
}

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

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>

Answer 2

根据WhiteHat的回答，我添加了一些代码来自动化格式化值的引入。

＆＃13;

＆＃13;

// iso to name conversion
// https://gist.github.com/maephisto/9228207
var isoCountries = {
  'IT': 'Italy',
  'JO': 'Jordan',
  'LB': 'Lebanon',
};

function getCountryName(countryCode) {
  if (isoCountries.hasOwnProperty(countryCode)) {
    return isoCountries[countryCode];
  } else {
    return countryCode;
  }
};

// Load the Visualization API and the corechart package.
google.charts.load('current', {
  'packages': ['geochart'],

  'mapsApiKey': 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY'
});

// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(drawRegionsMap);

// Callback that creates and populates a data table,
// instantiates the chart, passes in the data and
// draws it.
function drawRegionsMap() {
  // Create the data table.
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Country');
  data.addColumn('number', 'Members');
  data.addRows([
    ['LB', 3],
    ['JO', 2],
    ['IT', 24],
  ]);

  // Set chart options
  var options = {
    colorAxis: {
      colors: ['#c1c1cd', '#53556e']
    },
    legend: 'none',
    backgroundColor: '#efefef'
  };

  // Create new data table for iso and full country name
  var dataMod = new google.visualization.DataTable();
  dataMod.addColumn('string', 'Country');
  dataMod.addColumn('number', 'Members');

  // Adding rows with iso and full country name
  var numRows = data.getNumberOfRows();

  for (var i = 0; i < numRows; i++) {
    dataMod.addRows([
      [{
        v: String(data.getValue(i, 0)),
        f: String(getCountryName(data.getValue(i, 0)))
      }, data.getValue(i, 1)],
    ]);
  };

  // Instantiate and draw our chart, passing in some options.
  var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));
  chart.draw(dataMod, options);

}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;