Google 的 GeoChart 不会在爱尔兰地图中显示科克

Question

我正在绘制爱尔兰的省份地图，但出于某种原因 Google 无法识别科克郡。有人建议使用 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>

编辑

当使用 sheet 作为数据源时，
需要使用 sheet 中的数据 table 创建视图。

因此应该创建视图定义，
收到数据 table 后。

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

google.charts.load('current', {
  'packages': ['geochart'],
  'mapsApiKey': chartSettings.mapsApyKey
});
google.charts.setOnLoadCallback(drawRegionsMap);

//querying external data from a spreadsheet.
function drawRegionsMap() {

  var queryString = encodeURIComponent('Select *');

  var queryData = new google.visualization.Query(chartSettings.mapDataSource + queryString);

  queryData.send(handleQueryResponse);
}

function handleQueryResponse(response) {
  if (response.isError()) {
    alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
    return;
  }

  var data = response.getDataTable();
  
 //Swapping IE-CO on COrk in the dta array, I assume?
  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: 'Country',
    type: 'string'
  }, 1]);


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


  var chart = new google.visualization.GeoChart(document.getElementById('map'));
  chart.draw(view, options);

}

<html>

  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      var chartSettings = {

        mapsApyKey: "AIzaSyBgxLAOHUq52CuZ0kcl9WHnOjzt40w082k",
        mapDataSource: "https://docs.google.com/spreadsheets/d/1YV7VSsG_nQXmL_L44cJSz4GrxOLIBNJrgd8qPXM_NQ0/gviz/tq?gid=249758876&headers=1&range=M21:N47&tq="

      };

    </script>
  </head>

  <body>
    <div id="map"></div>
  </body>

</html>

Google 的 GeoChart 不会在爱尔兰地图中显示科克

Google's GeoChart wont display Cork within Ireland map

charts

google-maps

google-visualization

google-maps-api-3