2016-03-20 27 views
2

için varsayılan y ekseni etiketini özelleştirme Varsayılan y ekseni etiketine $ öneki girmek istiyorum. Çubuk grafikim milyonlarda değerler kullanıyor, böylece grafik değer MM (80MM, 30MM). Yapmak istediğim, y eksenini $ -value-MM ($ 80MMm $ 30MM) gibi biçimlendirmek. Aşağıdaki kodu denedim ve işe yaramayacak mıyım? Bunu başarmak içinHighcharts

yAxis: [{ // Primary yAxis 
    labels: { 
     formatter: function() { 
      return '$' + this.value; 
     } 
    }, 
    title: { 
     text: 'Revenue', 
+0

Eğer MM' 'bunu özelleştirilmiş mü? Milyonlarca M olmasını bekler miydim? –

+0

Eğer herhangi bir çözüm yardımcı olursa, cevap olarak işaretleyin, böylece aynı problemle karşılaşan insanlar kolayca bulabilirler. –

cevap

2

biri oldukça karmaşık bir yol rakamlardan oluşan eksen için onların iç defaultLabelFormatter kullandığı kod Highcharts yeniden kullanmak ve eksen biçimlendiricisinde onu kullanmaktır. Eklenen öneki (JSFiddle) ile

Buna bir örnek,:

yAxis: { 
    labels: { 
     formatter: function() { 
      var numericSymbols = Highcharts.getOptions().lang.numericSymbols; 
      var i = numericSymbols && numericSymbols.length; 
      var numericSymbolDetector = this.axis.isLog ? this.value : this.axis.tickInterval; 
      var UNDEFINED, ret, multi; 

      while (i-- && ret === UNDEFINED) { 
       multi = Math.pow(1000, i + 1); 
       if (numericSymbolDetector >= multi && (this.value * 10) % multi === 0 && numericSymbols[i] !== null) { 
        ret = Highcharts.numberFormat(this.value/multi, -1) + numericSymbols[i]; 
       } 
      } 

      if (ret === UNDEFINED) { 
       if (Math.abs(this.value) >= 10000) { 
        ret = Highcharts.numberFormat(this.value, -1); 

       } else { 
        ret = Highcharts.numberFormat(this.value, -1, UNDEFINED, ''); 
       } 
      } 

      return "$"+ret; // Adding the prefix 
     } 
    }, 
} 

Bunun bir deneysel kısa formu gerektirir bağlamda temel parçaları ile defaultLabelFormatter çağırmak olacaktır. Bunun bir örneği (JSFiddle): bağlamda gibi

yAxis: { 
    labels: { 
     formatter: function() { 
      return "$" + this.axis.defaultLabelFormatter.call({ 
       axis: this.axis, 
       value: this.value 
      }); 
     } 
    }, 
} 

sizin eksen datetime veya categories ya da belki logaritmik olsaydı beklendiği gibi işe yaramaz, ama sayısal eksen için çalışması gerektiğini eksik. Tam görüntü için tam defaultLabelFormatter uygulamasına bakmanızı öneririz.

3

Soruyu doğru anlıyorsam, verileriniz zaten 'MM' son ekine sahip ve öneki '$' eklemek istiyorsunuz.

deneyin,

yAxis: { 
     labels: { 
      format: '${value}' 
     } 
    } 
+0

'format' ve' formatter' kullanımı arasındaki farkın, Highcharts'ın değerleri otomatik olarak en yakın düzeye kısaltmasına izin vermesidir. Örneğin. Biçim aşağıdaki gibi görünecek iken 100 000 ila 100k, 1 000 000 1M vb. –