2016-04-13 19 views
1

'dan daha az veri örtüsüyle örtüşüyor. Kullanıcı, harita üzerinde gezinirken, göstergelerin üstünde, aşağıdaki efsanedeki verileri gösterir. Veri aralığı 10000'den küçükse, o zaman örtüşüyor Aşağıdaki resimde görüldüğü gibi. Lütfen 10000 altındaki verilerin nasıl biçimlendirileceğini öneriyorum (1000'in üzerindeki veriler için 10k, 12,5k vb. gibi veriler gösteriliyor) enter image description hereHighchart'larda, efsanedeki veriler, 10000

+0

deneyin - http://api.highcharts.com/highcharts#legend – Bhumika107

+0

canlı bir örneği ya da keman gösterebilir? – jlbriggs

+0

Orada bulabileceğim bir şey yok. Bu belgeleri gözden geçirdim. –

cevap

1

Bir özelleştirme için colorAxis.labels.formatter kullanabilirsiniz. efsanenizde kullanılan colorAxis etiketleri için stil. Buradan bazı stil seçenekleri ile uğraşırken

colorAxis: { 
    labels : { 
     formatter: function() { 
    return parseInt(this.value) >= 1000 ? parseInt(this.value)/1000 + 'k' : this.value ; 
     } 
    } 
} 
+0

Evet, bu işe yarıyor. Yardım için teşekkürler. –

+0

Aşağıda yayınladığımdan daha modüler bir yanıt var. –

1
ColorAxis: { 
    labels: { 
         formatter: function() { 
          var value = this.value.toFixed(0), 
           newValue = value, 
           shortNum, 
           precision; 
          if (1000 <= value) { 
           var suffixes = ['', 'K', 'M', 'B', 'T', 'G' ], 
            suffixNum = Math.floor(('' + value).length/3), 
            shortValue = ''; 
           for (precision = 2; precision >= 1; precision = precision - 1) { 
            shortValue = parseFloat((0 !== suffixNum ? (value/Math.pow(1000, suffixNum)) : value).toPrecision(precision)); 
            var dotLessShortValue = (shortValue + '').replace(/[^a-zA-Z 0-9]+/g, ''); 
            if (dotLessShortValue.length <= 2) { 
             break; 
            } 
           } 
           if (0 !== shortValue % 1) { 
            shortNum = shortValue.toFixed(1); 
           } 
           newValue = shortValue + suffixes[ suffixNum ]; 
          } 
          return newValue; 
         } 
        } 
}