Le Style de chacune des Régions dans jvectormap

DONC,

J'ai un custom jVectorMap et j'ai réussi à changer la couleur des régions à l'aide de ce code à partir de la jVectorMap API:

regionStyle: {
      initial: {
      fill: '#5e7073',
      "fill-opacity": 1,
      stroke: 'none',
      "stroke-width": 0,
      "stroke-opacity": 1
      },
      hover: {
      fill: 'black'
      },

Mais j'essaye de contrôler le remplissage/placez les propriétés de chaque région de la carte individuellement. Quelqu'un a fait ou a une idée de comment faire? J'ai regardé à travers la jVectorMap API, mais en vain.

Marca

InformationsquelleAutor Marcatectura | 2013-04-03
  1. 14

    Tout d'abord, vous avez besoin de connaître les codes pour les régions que vous êtes en train de changer. Vous pouvez obtenir ces à partir du fichier de la carte que vous utilisez. L'exemple ci-dessous est pour la carte des états-unis.

    Pour la modification du remplissage, vous pouvez personnaliser les régions lorsque vous créez la carte:

    regionStyle: {
    //...
},
series: {
    regions: [{
        values: {
            'US-CA': '#3e9d01',
            'US-WA': '#4b93c1',
            'US-TX': '#c1a14b'
        },
        attribute: 'fill'
    }]
}

    Ou vous pouvez les personnaliser à la volée (et les "valeurs" paramètre ci-dessus ne serait pas nécessaire):

    $(function(){
    var map = $('#map').vectorMap('get', 'mapObject');
    map.series.regions[0].setValues({
        'US-CA': '#3e9d01'
    });
});
    • Il est important de noter que si vous utilisez le 'échelle" dont vous avez besoin pour setValues l'aide de l'échelle des valeurs. Donc, si c'est ma série, série: { les régions: [{ l'échelle: { Rouge: '#ff0000', Bleu: '#0000ff', Swing: '#00ff00' }, attribut: "remplir", les valeurs: { }, légende: { horizontale: c'est vrai, title: 'l'Alignement Politique' } }] }, puis vous le dire, var myCustomColors = { 'US-CA': 'Swing', 'NOTRE-TX': 'Swing', "Etats-unis-FL': 'Swing' };, et puis... la carte.de la série.régions[0].setValues(myCustomColors);
    InformationsquelleAutor David
  2. 1

    j'ai mis une méthode personnalisée dans le jquery-jvectormap-1.1.1.js

    vérifier tous les script dans http://pastebin.com/MSt94XuH

    setSelectedRegionStyle : function (r,c) {
return this.regions[r].element.style.selected.fill = c;
},

    Vous avez besoin d'obtenir une référence à la carte:

    map = $("#world-map-gdp").vectorMap('get', 'mapObject');

    Et de Définir un style personnalisé pour chaque pays:

    map.setSelectedRegionStyle('IT', '#b2c9cb');
map.setSelectedRegionStyle('AT', '#b2c9cb');
map.setSelectedRegionStyle('BE', '#b2c9cb');

    Si vous avez besoin d'effacer tous les styles utilisation:

    map.clearSelectedRegions();
    InformationsquelleAutor Blas Ruiz