Format Highcharts étiquettes d'axe y
J'utilise Highcharts pour générer un graphique linéaire qui montre les valeurs monétaires. Par défaut, les étiquettes de l'axe y utilisent des préfixes métriques pour l'abréviation, par exemple 3k est affiché au lieu de 3000
Je voudrais ajouter un symbole de devise à ces étiquettes, par exemple afficher $ 3k au lieu de 3k. cependant, dès que j'ajoute le symbole de devise, les préfixes métriques ne sont plus utilisés. J'ai essayé ce qui suit
yAxis: {
labels: {
formatter: function () {
return '$' + this.value;
}
}
}
Et aussi essayé
yAxis: {
labels: {
format: '${value}'
}
}
Mais dans les deux cas, $3000 est affiché à la place est-il possible d'ajouter un symbole monétaire sans perdre le préfixe métrique ?
Voici une démo (jsfiddle ici ) qui illustre le problème
$(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>2 réponses
Vous pouvez appeler le formateur d'origine à partir de votre fonction de formateur:
$(function () {
$('#container').highcharts({
yAxis: {
labels: {
formatter: function () {
return '$' + this.axis.defaultLabelFormatter.call(this);
}
}
},
series: [{
data: [15000, 20000, 30000]
}]
});
});
J'ai regardé dans le code source HighCharts et j'ai découvert que si vous passez un format ou formatter Il n'ajoutera pas de symbole numérique. Il est à l'intérieur de l'instruction else if, c'est-à-dire formatOption xor numericSymbol. Vous devez donc ajouter un formateur et faire la logique vous-même.
Ceci est un copier-coller légèrement modifié de leur code:
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);
}