2016-10-06 2 views
1

Ich verwende Highmaps, um die Anzahl der relevanten Benutzer aus jedem einzelnen Land anzuzeigen. Dies sollte dann in einem Farbverlauf angezeigt werden, so dass je mehr Nutzer aus einem Land kommen, desto dunkler die Farbe. Ich lasse es in Highmaps laufen, so dass es die Daten lädt, aber aus irgendeinem Grund zeigt es alle Länder in schwarz an, obwohl die Farbverlaufslegende weiß zu blau ist. Irgendeine Idee warum das ist? Vielen Dank!Highmaps verwendet keinen Farbverlauf

$(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

Warum ist Ihr [colorAxis] (http://api.highcharts.com/highmaps/colorAxis) Element leer? Dort werden die Farben festgelegt. Siehe [ihre Beispiele] (http://www.highcharts.com/maps/demo/all-maps) –

+0

Es ist immer noch schwarz mit colorAxis gesetzt, aber ich habe es b/c auf http://jsfiddle.net /gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/maps/demo/geojson/ es scheint, als ob es Standardverhalten hat, das gut funktioniert. – zojwek

Antwort

2

Sie haben ein Problem mit den Datentypen.

Konvertieren Sie Ihre Ganzzahlen nicht in Zeichenfolgen, indem Sie sie in Anführungszeichen setzen.

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

Die Lösung besteht darin, das korrekte Format der Daten und das korrekte colorAxis-Objekt zu haben –

Verwandte Themen