2012-10-12 9 views
7

Im utilizzando il jvectormap plugin e sto cercando di impostare i colori di ciascuna delle regioni sulla mappa. Tuttavia, dopo aver applicato il codice sotto la mappa viene visualizzato ma senza colori applicati. Mostra solo la mappa in bianco.jvectormap region colors

Ho letto più esempi e domande su questo argomento, ma non riesco a farlo funzionare per me.

Example 1 di impostazione di colori casuali su una mappa.

Documentation

Similar question al mio, ma non risolve il problema.

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' 
     }] 
    } 
}); 

Qualcuno può vedere il problema?

risposta

11

Ecco un esempio funzionante di ciò che penso tu stia tentando di fare.

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); 
})(); 

Questo esempio costruisce fuori di due esempi sul sito jvectormap:
1. http://jvectormap.com/maps/countries/australia/
2. http://jvectormap.com/examples/random-colors/

il violino include il file jvectormap 1.1 dal sito. Inoltre, l'esempio dei colori casuali sul sito utilizza jvm. WorldMap.

+0

Grazie! Questo è esattamente quello che dovevo fare. Il tuo esempio mostra che funziona comunque. Tuttavia, non funziona con il mio codice. Io chiamo lo script usando '.getScript()' che contiene questo codice nella funzione 'document.ready()' e nulla appare sullo schermo. Devo andare male da qualche altra parte, o ci deve essere un problema chiamandolo. Usando firebug, posso vedere che lo script viene chiamato comunque. E la mappa mostrava in anticipo, usando lo stesso codice. – Navigatron

+0

Trovato ora riparato, questo codice non funziona in 'document.ready()' utilizzando solo la funzione ha fatto il lavoro! – Navigatron

+1

jsfiddle link è ora morto. –

2

Il codice di seguito è stato modificato per correggere gli errori di sintassi nel codice inviato.

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' 
     }] 
    } 
}); 

Unbound (la più vicina contrario di incapsulato posso radunare) trattini all'interno chiavi oggetto causano un errore di sintassi. L'errore stesso è per un'etichetta non valida.

Problemi correlati