web-dev-qa-db-fra.com

Formater les étiquettes des axes Y des Highcharts

J'utilise Highcharts pour générer un graphique linéaire qui montre les valeurs des devises. Par défaut, les étiquettes de l'axe y utilisent des préfixes métriques pour l'abréviation, par ex. 3k s'affiche au lieu de 3000

Je voudrais ajouter un symbole monétaire à ces étiquettes, par ex. afficher 3k $ au lieu de 3k. Cependant, dès que j'ajoute le symbole monétaire, les préfixes métriques ne sont plus utilisés. J'ai essayé ce qui suit

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

et a également essayé

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

Mais dans les deux cas, 3 000 $ sont affichés au lieu de 3 000 $. 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>
javascripthighcharts
25
Dónal

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]
        }]

    });
});

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

42
Barbara Laird

J'ai regardé dans le code source de HighCharts et j'ai découvert que si vous passez un format ou formatter cela n'ajoutera pas de symbole numérique. C'est à l'intérieur else if instruction, c'est-à-dire formatOption xor numericSymbol. Vous devez donc ajouter un formateur et faire la logique vous-même.

c'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);
       }

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

2
Dmitry