Использование JQuery и онлайн JSON данных для заполнения JVectorMaps - PullRequest
Новая
       60

Использование JQuery и онлайн JSON данных для заполнения JVectorMaps

1 голос
/ 11 апреля 2020

Я использую JSON данные для непосредственного заполнения JVectorMaps (и других). Актуальная статистика по наиболее распространенным индикаторам доступна через json онлайн - так что этот скрипт должен позволить вам быстро и легко собирать любые данные, которые вам нравятся. Я просто еще не разобрался с кодом форматирования, так как я очень плохо знаком с JQuery & JS. Я поставил знак вопроса, где я в тупике.

В идеале сценарии выборки и данных могут принимать переменную ind_id и метку, которая представляет любой индикатор на векторной карте, а не только один индикатор GDP (NY.GDP.MKTP.CD), который я использовал в качестве примера. здесь. 

document.addEventListener('DOMContentLoaded', () => {
    console.log("loaded")
    fetchCountryData()
})

function fetchCountryData () {
    fetch('http://api.worldbank.org/v2/country/all/indicator/NY.GDP.MKTP.CD?format=json&mrv=1&per_page=300)
    // 
    .then(resp => resp.json())
    .then(data => {
        let country.id = data[1]
        let value = data[1]
    create-GDP-Data(country.id,value)
})  
}

function create-GDP-Data(country.id,value){
    let gdpData = ?
}

$('#world-map-gdp').vectorMap({
  map: 'world_mill',
  series: {
    regions: [{
      values: gdpData,
      scale: ['#C8EEFF', '#0071A4'],
      normalizeFunction: 'polynomial'
    }]
  },
  onRegionTipShow: function(e, el, code){
    el.html(el.html()+' (GDP - '+gdpData[code]+')');
  }
});

Данные о ВВП (gdpData) должны быть отформатированы следующим образом: 

var gdpData = {
  "AF": 16.63,
  "AL": 11.58,
  "DZ": 158.97,
  ...
};

1 Ответ

1 голос
/ 13 апреля 2020

Вы знаете, что запрошенный набор данных возвращает обратно несколько другую структуру данных, чем та, которая необходима для jVectorMap. Итак, что вам нужно, это переназначение из входящих данных в последние.

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

Пожалуйста, смотрите комментарии в моем предложении ниже для получения дополнительной информации:

DEMO: Dynami c загрузка набора данных региона jVectorMap 

$(function() {
  /* Handler for jQuery .ready() */
  
  function mapper(data, key) { 
    /* Deep search for a key, return the value found. */
    var keys = key.split('.'), value = data[keys.shift()];
    for (i=0, l=keys.length; i<l; i++) {value = value[keys[i]]}
    return value;
  }     
   
  function showMapValues(schema, map, values, min, max) { 
    var regions = map.series.regions[0];
    /* Reset the scale min & max, allow recomputation. */ 
    regions.params.min = min;
    regions.params.max = max;
    regions.setValues(values.regions);
    map.dataSetName = schema.dataSetName;
    map.dataSetFormat = schema.dataSetFormat; 
  }
  
  function remapData(schema, map, data) { 
    var values = {regions: {}, markers: {}};
    /* Loop over the returned dataset and invoke remap. */
    $.each(data, function(i, item) { 
      var code = mapper(item, schema.countryCodeField),
          value = mapper(item, schema.countryValueField) || 0;
      /* Find out if this is a valid region inside the map. */
      var isRegionCode = typeof map.regions[code] !== 'undefined';
      /* Find out if this is a valid marker inside the map. */
      var isMarkerCode = typeof map.markers[code] !== 'undefined';
      /* Fill two separate datasets for regions & markers. */
      if(isRegionCode) values.regions[code] = value;
      if(isMarkerCode) values.markers[code] = value;
    }); 
    return values;
  }
  
  function fetchAlternateCountryData(schema, map) {
    $.ajax({
      url: schema.alternate,
      dataType: 'json',
      success: function(result) {
        var dataSet = result[schema.dataSetIndex];
        /* Dynamically update the map with the new local data */
        showMapValues(schema, map, remapData(schema, map, dataSet));
      }
    }); 
  }
  
  function fetchCountryData(schema, map) {
    $.ajax({
      url: schema.url,
      dataType: 'json',
      data: schema.params,
      success: function(result) {
        var dataSet = result[schema.dataSetIndex];
        if(dataSet) {
          /* Dynamically update the map with the new remote data */
          showMapValues(schema, map, remapData(schema, map, dataSet));
        } else {
          /* Manage "Invalid value" response */
          fetchAlternateCountryData(schema, map);
        }
      },
      error: function(request, textStatus, errorThrown) { 
        /* Manage some other trappable ajax errors */
        fetchAlternateCountryData(schema, map);
      }
    }); 
  }
  
  var worldMap = new jvm.Map({
    map: 'world_mill_en',
    container: $('#world-map'),
    zoomOnScroll: true,
    regionsSelectable: false,
    backgroundColor: "aliceblue", 
    markers: [], /* Initialize the map with empty markers */
    series: {
      regions: [{
        values: {}, /* Initialize the map with empty region values */
        scale: ['#C8EEFF', '#0071A4'],
        normalizeFunction: 'polynomial'
      }],
      /* Initialize the map with empty marker values */
      markers: [{attribute: 'fill', scale: {}, values: []}]
    }, 
    onRegionTipShow: function(e, el, code){
      var value = worldMap.series.regions[0].values[code],
          formattedValue = new Intl.NumberFormat('en-US', worldMap.dataSetFormat).format(value);
      el.text(el.text() + ' (' + worldMap.dataSetName + ': ' + formattedValue + ')');
    }
  });
      
                                                                                                                       
  /* Define the data type & the location of the relevant fields inside the incoming data */
  var schema = {
      url: 'https://api.worldbank.org/v2/country/all/indicator/NY.GDP.MKTP.CD',
      params: 'format=json&mrv=1&per_page=300',
      alternate: '/ind_MapData',
      dataSetName: 'GDP', 
      dataSetFormat: {style: 'currency', currency: 'USD'}, 
      dataSetIndex: 1, 
      countryCodeField: 'country.id', 
      countryValueField: 'value'
  }; 
      
  fetchCountryData(schema, worldMap);
   
});
<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jvectormap@2.0.4/jquery-jvectormap.min.css" type="text/css">
  <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/jvectormap@2.0.4/jquery-jvectormap.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/jvectormap@2.0.4/tests/assets/jquery-jvectormap-world-mill-en.js"></script>
</head>

<body>
  <div id="world-map" style="width: 600px; height: 400px"></div>
</body>

</html>

Более того:

Обратите внимание: оригинальная карта мира от jVectorMap не включает некоторые крошечные страны, такие как Сингапур, Лихтенштейн и скоро. Они просто слишком малы, вам нужно много увеличивать. Предпочтительным решением этой проблемы является размещение дополнительных маркеров на их месте. После этого Вы можете установить входящие данные для этих маркеров соответственно.

Смотрите мой ответ здесь: jVectorMap - Как динамически добавить маркер

Кстати, благодаря bjornd за отличный jVectorMap.
...