2016-10-06 3 views
1

Я использую Highmaps, чтобы показать количество релевантных пользователей из каждой отдельной страны. Затем это должно отображаться в градиенте, так что чем больше пользователей из страны, тем темнее цвет. Я запускаю его в 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([ 
 
    \t ["AE","31"], 
 
    ["AR","51"], 
 
    ["AT","71"], 
 
    ["AU","81"], 
 
    ["BE","91"], 
 
    ["BG","9"], 
 
    ["BO","22"], 
 
    ["BR","37"], 
 
    \t ["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>

+0

Почему ваш элемент [colorAxis] (http://api.highcharts.com/highmaps/colorAxis) пусто? Именно там цвета устанавливаются. См. [Их примеры] (http://www.highcharts.com/maps/demo/all-maps) –

+0

Это все еще черное с набором colorAxis, но я оставил его на b/c, глядя на http://jsfiddle.net /gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/maps/demo/geojson/ кажется, что он имеет поведение по умолчанию, которое работает нормально. – zojwek

ответ

2

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

Не конвертируйте целые числа в строки, помещая кавычки вокруг них.

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] ];

+0

Решение будет иметь правильный формат данных и правильный объект colorAxis –

Смежные вопросы