2012-10-12 20 views
7

jvectormap plugin kullanıyorum ve haritadaki bölgelerin her birinin renklerini ayarlamaya çalışıyorum. Ancak, aşağıdaki kodu uyguladıktan sonra harita görüntülenmez ancak renk uygulanmaz. Sadece haritayı beyaz olarak gösterir.jvectormap bölge renkleri

Bu konuyla ilgili çok sayıda örnek ve soru okudum, ancak bunu benim için işe yaratamam. Harita üzerinde rastgele renkler ayarlama hakkında

Example 1. madenine

Documentation

Similar question, ancak sorunumu çözmez.

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

Sorun gören var mı?

cevap

11

Yapmaya çalıştığınızı düşündüğüm bir çalışma örneği.

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

Bu örnek jvectormap sitesinde iki örnek kapalı oluşturur

:
1. http://jvectormap.com/maps/countries/australia/
2. http://jvectormap.com/examples/random-colors/

keman sitesinden jvectormap 1.1 dosyası içerir. Ayrıca sitede Rastgele Renkler örneğinin jvm'yi kullandığını unutmayın. WorldMap.

+0

Teşekkürler! Tam olarak yapmam gereken şey bu. Örneğiniz zaten işe yaradığını gösteriyor. Ancak, kodumla çalışmıyor. Bu belgeyi 'document.ready()' fonksiyonunda içeren '.getScript()' yi kullanarak komutta arıyorum ve ekranda hiçbir şey görünmüyor. Başka bir yerde yanlış gitmem gerekiyor ya da onu aramakta sorun olmalı. Firebug kullanarak, betiğin yine de çağrıldığını görebiliyorum. Ve harita aynı kodu kullanarak elden önce gösterildi. – Navigatron

+0

Şimdi düzeltildi, bu kod sadece işlevini kullanarak 'document.ready()' de çalışmıyor! – Navigatron

+1

jsfiddle bağlantısı artık öldü. –

2

Aşağıdaki kod, gönderilen kodunuzdaki sözdizimi hatalarını düzeltmek üzere düzenlenmiştir. Nesne anahtarları bir sözdizim hataya neden olan

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

bağlanmamış (I toplayabilecek kapsüllenmiş en yakın zıt anlamlı) tire işareti. Hatanın kendisi geçersiz bir etikettir.