2014-09-30 3 views
15

Я использую Highcharts для создания линейной диаграммы, отображающей валютные значения. По умолчанию метки оси Y используют метрические префиксы для аббревиатуры, например. 3k отображается вместо 3000Формат ярлыков Y-оси Highcharts

Я хотел бы добавить символ валюты к этим меткам, например. отображать $ 3k вместо 3k. Однако, как только я добавляю символ валюты, префиксы метрики больше не используются. Я пробовал следующий

yAxis: { 
     labels: {     
      formatter: function() { 
       return '$' + this.value; 
      } 
     } 
    } 

, а также пытались

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

Но в обоих случаях $ 3000 отображается вместо $ 3k. Можно ли добавить символ валюты без потери префикса метрики?

Вот пример (JSFiddle here), что иллюстрирует проблему

$(function() { 
 
    $('#container').highcharts({ 
 

 
    yAxis: { 
 
     // if you include the lines below, the metric prefixes disappear 
 
     /* 
 
     labels: { 
 
      format: '${value}' 
 
     } 
 
     */ 
 
    }, 
 

 
    series: [{ 
 
     data: [15000, 20000, 30000] 
 
    }] 
 

 
    }); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
 
<script src="https://code.highcharts.com/highcharts.js"></script> 
 

 
<div id="container" style="height: 400px; width: 500px"></div>

ответ

29

Вы можете назвать оригинальный форматировщик из вашей функции форматировочной:

$(function() { 
    $('#container').highcharts({ 

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

     series: [{ 
      data: [15000, 20000, 30000] 
     }] 

    }); 
}); 

http://jsfiddle.net/x6b0onkp/2/

+2

впечатляющая работа, спасибо большое! –

+0

Спасибо! Вы знаете, как я могу добавить запятую? – Crystal

+0

@xgrioux Я не уверен, что вы подразумеваете под этим. Вы хотите, чтобы он отображал 3000 долларов вместо 3 тысяч долларов? –

2

Я смотрел в Highcharts исходный код и обнаружил, что если вы передаете format или formatter это не добавит числовое символ. Это внутри else if заявление, т. Е. ФорматOption xor numericSymbol. Поэтому вам нужно добавить форматтер и сделать логику самостоятельно.

это слегка измененная копипаст их кода:

 formatter: function() { 
      var ret, 
       numericSymbols = ['k', 'M', 'G', 'T', 'P', 'E'], 
       i = numericSymbols.length; 
      if(this.value >=1000) { 
       while (i-- && ret === undefined) { 
        multi = Math.pow(1000, i + 1); 
        if (this.value >= multi && numericSymbols[i] !== null) { 
         ret = (this.value/multi) + numericSymbols[i]; 
        } 
       } 
      } 
      return '$' + (ret ? ret : this.value); 
     } 

http://jsfiddle.net/x6b0onkp/1/

Смежные вопросы