Highmaps не использует цветовой градиент

Question

Я использую Highmaps, чтобы показать количество соответствующих пользователей из каждой отдельной страны. Затем это должно отображаться в градиенте, так что чем больше пользователей из страны, тем темнее цвет. У меня он работает в Highmaps, так что он загружает данные, но по какой-то причине он отображает все страны черным, несмотря на то, что легенда градиента от белого к синему. Есть идеи, почему это так? Спасибо!

$(document).ready(function(){
  // Basic highcharts initialization
  Highcharts.setOptions({
    lang: {
      thousandsSep: ','
    }
  });

  var analytics_map = new AnalyticsMap('#container');
  analytics_map.setTitle('# of Signups');
  analytics_map.load([
   ["AE","31"],
    ["AR","51"],
    ["AT","71"],
    ["AU","81"],
    ["BE","91"],
    ["BG","9"],
    ["BO","22"],
    ["BR","37"],
    ["US","173"],
    ["UY","5"],
    ["ZA","19"]
  ]);
  
  function AnalyticsMap(selector){
    this.selector = selector,
    this.title = 'Default Title',
    this.setTitle = function (title){
      this.title = title;
    },
    this.load = function(data){
      $(this.selector).highcharts('Map', {
        title: {
          text: this.title
        },
        mapNavigation: {
          enabled: true,
          buttonOptions: {
            verticalAlign: 'bottom'
          }
        },
        colorAxis: { 
        },
        series: [{
          data: data,
          mapData: Highcharts.maps['custom/world'],
          joinBy: ['iso-a2', 0],
          keys: ['iso-a2', 'value'],
          name: this.title,
          dataLabels: {                 
            //enabled: true, 
            //format: '{point.code}'
          },
          tooltip: {
            pointFormat: '{point.iso-a2}: {point.value} signups'
          }
        }]
      });
    }
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/maps/highmaps.js"></script>
<script src="https://code.highcharts.com/mapdata/custom/world.js"></script>

<div id="container"></div>

Answer 1

У вас есть проблема с типами данных.

Не конвертируйте целые числа в строки, заключая их в кавычки.

var data = [ ['DE.SH', 728], ['DE.BE', 710], ['DE.MV', 963], ['DE.HB', 541], ['DE.HH', 622], ['DE.RP', 866], ['DE.SL', 398], ['DE.BY', 785], ['DE.SN', 223], ['DE.ST', 605], ['DE.NW', 237], ['DE.BW', 157], ['DE.HE', 134], ['DE.NI', 136], ['DE.TH', 704], ['DE.', 361] ];