2012-10-12 15 views
7

Im przy użyciu jvectormap plugin i próbuję ustawić kolory każdego z regionów na mapie. Jednak po zastosowaniu poniższego kodu wyświetlana jest mapa, ale bez zastosowania kolorów. Pokazuje tylko mapę w kolorze białym.kolory regionu jvectormap

Przeczytałem wiele przykładów i pytań na ten temat, ale wydaje mi się, że nie działa to dla mnie.

Example 1 z ustawiania losowych kolorów na mapie.

Documentation

Similar question do kopalni, jednak nie rozwiązuje mojego problemu.

jQuery('#mapDiv').vectorMap({ 
    map: 'au_merc_en', 
    backgroundColor: 'none', 
    colors: { 
     AU-SA: '#4E7387', 
     AU-WA:'#333333', 
     AU-VIC:'#89AFBF', 
     AU-TAS:'#817F8E', 
     AU-QLD:'#344B5E', 
     AU-NSW:'#344B5E', 
     AU-ACT:'#344B5E', 
     AU-NT:'#344B5E' 

    }, 
    series: { 
     regions: 
     [{ 
     attribute: 'fill' 
     }] 
    } 
}); 

Czy ktoś może zobaczyć problem?

Odpowiedz

11

Oto działająca próbka tego, co myślę, że próbujesz zrobić.

http://jsfiddle.net/3xZ28/34/

(function() { 
    var myCustomColors = { 
     'AU-SA': '#4E7387', 
     'AU-WA': '#333333', 
     'AU-VIC': '#89AFBF', 
     'AU-TAS': '#817F8E', 
     'AU-QLD': '#344B5E', 
     'AU-NSW': '#344B5E', 
     'AU-ACT': '#344B5E', 
     'AU-NT': '#344B5E' 
    }; 

    map = new jvm.WorldMap({ 
     map: 'au_merc_en', 
     container: $('#ausie'), 
     backgroundColor: '#eff7ff', 
     series: { 
      regions: [{ 
       attribute: 'fill' 
      }] 
     } 
    }); 

    map.series.regions[0].setValues(myCustomColors); 
})(); 

tym przykładzie opiera się na dwóch przykładach na stronie jvectormap:
1. http://jvectormap.com/maps/countries/australia/
2. http://jvectormap.com/examples/random-colors/

skrzypcach zawiera plik ze strony jvectormap 1.1. Zwróć też uwagę, że przykład Losowe kolory na stronie używa jvm. WorldMap.

+0

Dzięki! Właśnie to musiałem zrobić. Twój przykład pokazuje, że tak działa. Jednak nie działa z moim kodem. Przywołuję skrypt za pomocą '.getScript()', który zawiera ten kod w funkcji 'document.ready()' i nic nie pojawia się na ekranie. Muszę pójść źle gdzie indziej, albo musi być problem z wywołaniem tego. Używając firebuga, widzę, że skrypt i tak jest wywoływany. A mapa pokazała się przed ręką, używając tego samego kodu. – Navigatron

+0

Naprawiono to teraz, ten kod nie działa w 'document.ready()' używając tylko funkcji wykonanej! – Navigatron

+1

jsfiddle link jest już martwy. –

2

Poniższy kod został zmodyfikowany w celu naprawienia błędów składni w opublikowanym kodzie.

jQuery('#mapDiv').vectorMap({ 
    map: 'au_merc_en', 
    backgroundColor: 'none', 
    colors:{ 
     "AU-SA": '#4E7387', 
     "AU-WA":'#333333', 
     "AU-VIC":'#89AFBF', 
     "AU-TAS":'#817F8E', 
     "AU-QLD":'#344B5E', 
     "AU-NSW":'#344B5E', 
     "AU-ACT":'#344B5E', 
     "AU-NT":'#344B5E' 

    }, 
    series: { 
     regions: 
     [{ 
     attribute: 'fill' 
     }] 
    } 
}); 

Bez ograniczeń (najbliższy antonim enappapsulated I can muster) łączniki w kluczach obiektów powodują błąd składni. Sam błąd dotyczy nieprawidłowej etykiety.