Я использую Highcharts для создания линейной диаграммы, отображающей валютные значения. По умолчанию метки оси Y используют метрические префиксы для аббревиатуры, например. Вместо 3 000 отображается 3k
Я хотел бы добавить символ валюты к этим меткам, например. отображать $3k вместо 3k. Однако, как только я добавляю символ валюты, префиксы метрики больше не используются. Я пробовал следующие
yAxis: {
labels: {
formatter: function () {
return '$' + this.value;
}
}
}
а также попытался
yAxis: {
labels: {
format: '${value}'
}
}
Но в обоих случаях вместо $3k отображается $3000. Можно ли добавить символ валюты без потери префикса метрики?
Здесь приведена демонстрация (JSFiddle здесь), которая иллюстрирует проблему
$(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>Вы можете вызывать исходный форматтер из вашей функции форматирования:
$(function () {
$('#container').highcharts({
yAxis: {
labels: {
formatter: function () {
return '$' + this.axis.defaultLabelFormatter.call(this);
}
}
},
series: [{
data: [15000, 20000, 30000]
}]
});
});
Я посмотрел исходный код HighCharts и выяснил, что если вы передадите format или formatter, он не будет добавлять числовой символ. Он находится внутри оператора else if, т.е. FormatOption 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);
}