GeoChart от Google не будет отображать пробку на карте Ирландии - PullRequest
Новая
       29

GeoChart от Google не будет отображать пробку на карте Ирландии

2 голосов
/ 03 апреля 2020

Я рисую карту провинции для Ирландии, и по какой-то причине 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);
      };

1 Ответ

2 голосов
/ 04 апреля 2020

вы можете использовать представление данных с вычисленным столбцом для замены известных проблемных стран.
и использовать обозначение объекта, чтобы фактическое название страны отображалось во всплывающей подсказке. 

  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>

РЕДАКТИРОВАТЬ

при использовании листа для источника данных,
представление должно быть создано с таблица данных с листа.

поэтому следует создать определение представления,
после получения таблицы данных.

см. Следующий рабочий фрагмент ... 

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>
...