Stile di Singole Regioni, jvectormap

COSÌ,

Ho una custom jVectorMap e sono riuscito a cambiare il colore delle regioni di utilizzare questo codice jVectorMap API:

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

Ma sto cercando di controllare il riempimento/hover proprietà per ogni regione della mappa singolarmente. Qualcuno ha fatto questo o ha un’idea di come realizzarla? Ho guardato attraverso il jVectorMap API, ma senza alcun risultato.

Marca

OriginaleL’autore Marcatectura | 2013-04-03

2 Replies
  1. 13

    Primo luogo, è necessario conoscere i codici per le regioni che si sta modificando. Si ottiene dalle file della mappa che si sta utilizzando. L’esempio riportato di seguito la mappa degli stati UNITI.

    Per la modifica del riempimento, è possibile personalizzare le regioni in cui si crea la mappa:

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

    O si potrebbe personalizzare “al volo” (e i “valori” parametro di cui sopra non sarebbe necessario):

    $(function(){
        var map = $('#map').vectorMap('get', 'mapObject');
        map.series.regions[0].setValues({
            'US-CA': '#3e9d01'
        });
    });
    È importante notare che se si utilizza la scala, che è necessario setValues usando la scala di valori. Quindi, se questa è la mia serie, serie: { regioni: [{ scala: { Red: ‘#ff0000’, Blu: ‘#0000ff’, Swing: ‘#00ff00’ }, attributo: ‘riempire’, valori: { }, legenda: { orizzontale: true, titolo: “Politica di Allineamento’ } }] }, poi ti dirò, var myCustomColors = { ‘US-CA’: ‘Swing’, ‘US-TX’: ‘Swing’, ‘NOI-FL’: ‘Swing’ };, e poi… mappa.della serie.regioni[0].setValues(myCustomColors);

    OriginaleL’autore David

  2. 1

    ho messo un metodo personalizzato in jquery-jvectormap-1.1.1.js

    controllare tutti gli script in http://pastebin.com/MSt94XuH

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

    Avete bisogno di ottenere di riferimento per la mappa:

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

    E Impostare uno stile personalizzato per ogni paese:

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

    Se avete bisogno di cancellare tutti gli stili di utilizzo:

    map.clearSelectedRegions();

    OriginaleL’autore Blas Ruiz

Lascia un commento