2012-10-12 258 views
7

Im utilizando el jvectormap plugin, y estoy tratando de establecer los colores de cada una de las regiones en el mapa. Sin embargo, después de aplicar el código a continuación, se muestra el mapa, pero sin colores aplicados. Simplemente muestra el mapa en blanco.jvectormap región colores

He leído múltiples ejemplos y preguntas sobre este tema, pero parece que no puedo hacer que funcione para mí.

Example 1 de configuración de colores aleatorios en un mapa.

Documentation

Similar question a la mía, sin embargo, no resuelve mi 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' 
     }] 
    } 
}); 

¿Alguien puede ver el problema?

Respuesta

11

Aquí hay una muestra de trabajo de lo que creo que está intentando hacer.

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

Este ejemplo se basa fuera de los dos ejemplos en el sitio jvectormap:
1. http://jvectormap.com/maps/countries/australia/
2. http://jvectormap.com/examples/random-colors/

El violín incluye el archivo jvectormap 1.1 desde el sitio. También tenga en cuenta que el ejemplo de colores aleatorios en el sitio usa jvm. WorldMap.

+0

Gracias! Esto es exactamente lo que necesitaba hacer. Tu ejemplo muestra que funciona de todos modos. Sin embargo, no está funcionando con mi código. Invoco el script usando '.getScript()' que contiene este código en la función 'document.ready()' y no aparece nada en la pantalla. Debo estar equivocado en otro lugar, o debe haber un problema llamándolo. Usando Firebug, puedo ver que el script se llama de todos modos. Y el mapa se mostró de antemano, usando el mismo código. – Navigatron

+0

Lo he reparado ahora, este código no funciona en 'document.ready()' usando solo la función que hizo el trabajo! – Navigatron

+1

jsfiddle link ahora está muerto. –

2

El código siguiente ha sido editado para corregir los errores de sintaxis en el código publicado.

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

Sin consolidar (antónimo más cerca de encapsulado que pueda reunir) guiones dentro claves de objeto causan un error de sintaxis. El error en sí es para una etiqueta no válida.

Cuestiones relacionadas