Google的GeoChart不会在爱尔兰地图上显示Cork

Question

我正在为爱尔兰绘制省份地图，由于某种原因，谷歌无法识别科克郡。有人建议使用IE-CO。但这违反了我使用CSV数据集的计划（我无法控制县名）。

有人知道为什么它不起作用，我该如何解决？

这里是我的代码https://jsfiddle.net/sashareds/kLjtne42/2/的示例

 google.charts.load('current', {
        'packages':['geochart'],
        // Note: you will need to get a mapsApiKey for your project.
        // See: https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings
        'mapsApiKey': 'AIzaSyBgxLAOHUq52CuZ0kcl9WHnOjzt40w082k'
      });
      google.charts.setOnLoadCallback(drawRegionsMap);

      function drawRegionsMap() {
        var data = google.visualization.arrayToDataTable([
        ['County',   'Case'],
        ['Carlow',   0],
        ['Cavan',   41],
        ['Clare',   50],
        ['Cork',   292], //IE-CO
        ['Donegal',   77],
        ['Dublin',   2077],
        ['Galway',   98],
        ['Kerry',   79],
        ['Kildare',   103],
        ['Kilkenny',   47],
        ['Laois',   16],
        ['Leitrim',   12],
        ['Limerick',   96],
        ['Longford',   16],
        ['Louth',   54],
        ['Mayo',   55],
        ['Meath',   88],
        ['Monaghan',   17],
        ['Offaly',   47],
        ['Roscommon',   13],
        ['Sligo',   26],
        ['Tipperary',   94],
        ['Waterford',   43],
        ['Westmeath',   86],
        ['Wexford',   18],
        ['Wicklow',   105]
        ]);

        var options = {
          region: 'IE', // Africa
          resolution: 'provinces',
          colorAxis: {colors: ['#f9cb9c', '#f07b50', '#ea4435']},
          backgroundColor: 'white',
          datalessRegionColor: '#fefefe',
          defaultColor: '#fefefe',
        };

        var chart = new google.visualization.GeoChart(document.getElementById('geochart-colors'));
        chart.draw(data, options);
      };

Answer 1

您可以使用带有计算列的数据视图来替换已知问题的国家/地区。并使用对象符号允许实际的国家名称显示在工具提示上。

  var view = new google.visualization.DataView(data);
  view.setColumns([{
    calc: function (dt, row) {
      var country = dt.getValue(row, 0);
      switch (country) {
        case 'Cork':
          country = {v: 'IE-CO', f: country};
          break;
      }
      return country;
    },
    label: data.getColumnLabel(0),
    type: data.getColumnType(0)
  }, 1]);

请参阅以下工作片段...

google.charts.load('current', {
  'packages':['geochart'],
  // Note: you will need to get a mapsApiKey for your project.
  // See: https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings
  'mapsApiKey': 'AIzaSyBgxLAOHUq52CuZ0kcl9WHnOjzt40w082k'
});
google.charts.setOnLoadCallback(drawRegionsMap);

function drawRegionsMap() {
  var data = google.visualization.arrayToDataTable([
    ['County',   'Case'],
    ['Carlow',   0],
    ['Cavan',   41],
    ['Clare',   50],
    ['Cork',   292], //IE-CO
    ['Donegal',   77],
    ['Dublin',   2077],
    ['Galway',   98],
    ['Kerry',   79],
    ['Kildare',   103],
    ['Kilkenny',   47],
    ['Laois',   16],
    ['Leitrim',   12],
    ['Limerick',   96],
    ['Longford',   16],
    ['Louth',   54],
    ['Mayo',   55],
    ['Meath',   88],
    ['Monaghan',   17],
    ['Offaly',   47],
    ['Roscommon',   13],
    ['Sligo',   26],
    ['Tipperary',   94],
    ['Waterford',   43],
    ['Westmeath',   86],
    ['Wexford',   18],
    ['Wicklow',   105]
  ]);
  
  var view = new google.visualization.DataView(data);
  view.setColumns([{
    calc: function (dt, row) {
      var country = dt.getValue(row, 0);
      switch (country) {
        case 'Cork':
          country = {v: 'IE-CO', f: country};
          break;
      }
      return country;
    },
    label: data.getColumnLabel(0),
    type: data.getColumnType(0)
  }, 1]);

  var options = {
    region: 'IE', // Africa
    resolution: 'provinces',
    colorAxis: {colors: ['#f9cb9c', '#f07b50', '#ea4435']},
    backgroundColor: 'white',
    datalessRegionColor: '#fefefe',
    defaultColor: '#fefefe',
  };

  var chart = new google.visualization.GeoChart(document.getElementById('geochart-colors'));
  chart.draw(view, options);  // <-- draw chart with data view
};

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="geochart-colors" style="width: 90%; height: 90%;"></div>