web-dev-qa-db-fra.com

Comment formater les tableaux de grande taille dataLabels Décimales

Pouvez-vous s'il vous plaît jeter un oeil à cet exemple et laissez-moi savoir comment je peux formater les étiquettes de données pour qu'elles ne s'affichent qu'avec deux nombres décimaux?

Voici les formats numériques que j'ai dans la série

 series: [{
                name: 'Tokyo',
                data: [7.554555, 6.34345559, 9.5555, 14.5555, 18.4333433, 21.5555, 25.2, 26.5333333, 23.33333, 18.23243543, 13.776565669, 9.65454656]
            }, {
                name: 'London',
                data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
            }]

et je voudrais les présenter comme 7.55, 6.34, 9.55. Merci

highcharts
16
Suffii

Vous devez combiner les dataLabelsformatter et Highcharts.numberFormat :

...
dataLabels: {
    enabled: true,
    formatter: function () {
        return Highcharts.numberFormat(this.y,2);
    }
}
...

Voir jsFiddle

26
bozdoz

J'ajouterais simplement une option de formatage aux étiquettes de données comme suit:

dataLabels: {
    enabled: true,
    format: '{point.y:,.2f}'
}

C'est la manière simple de le faire sans avoir à définir une fonction à l'aide du formateur.

supplémentaire:

La virgule après les deux points garantit qu’un nombre comme 1450.33333 s’affiche sous la forme 1 450,33, ce qui est également Nice.

16
ZekeDroid

Au cas où quelqu'un voudrait "aller plus loin", je montre des données qui peuvent aller de 10 ^ 1 à 10 ^ 9 alors je les convertis et je montre ensuite l'unité.

N'oubliez pas que Highcarts ne traite que des entiers. Par conséquent, si vous souhaitez ajouter des unités (et non dans YAxis à cause de plusieurs unités), vous pouvez les indiquer dans les données source, mais vous devez les formater ultérieurement: 

column: {
            dataLabels: {
                enabled: true,
                formatter: function () {
                    // Display only values greater than 0.
                    // In other words, the 0 will never be displayed.
                    if (this.y > 0) {
                        if (this.y >= Math.pow(10, 9))
                        {
                            return Highcharts.numberFormat(this.y /Math.pow(10, 9) , 1) + " mias";
                        }
                        else if (this.y >= Math.pow(10, 6))
                        {
                            return Highcharts.numberFormat(this.y /Math.pow(10, 6) , 1) + " mios";
                        }
                        else
                        {
                            return Highcharts.numberFormat(this.y, 0);
                        }
                    }
                },

mias: signifie "milliards" (traduction française de billard) mios: signifie "millions" (traduction française de millions)

2
pti_jul

J'ai remarqué dans les commentaires que vous vouliez ne pas afficher les zéros. 

C'est la solution la plus simple que j'ai pu trouver:

...
dataLabels: {
    enabled: true,
    formatter: function () {
        return parseFloat(this.y.toFixed(2)).toLocaleString();
    }
}
...

Si vous ne voulez pas que le nombre se termine par un séparateur de virgule (selon les paramètres régionaux), supprimez le .toLocaleString (). 

Sidenote: Malheureusement, l'utilisation de format (au lieu de formateur et d'une fonction js, comme ci-dessus) est limitée à un sous-ensemble de float conventions de formatage de la fonction de bibliothèque C sprintf, comme indiqué ici sur le site highcharts . Cette bibliothèque a le code g qui le ferait automatiquement pour nous, mais malheureusement, elle n’est pas implémentée dans Highcharts :(, c’est-à-dire que le format: '{point.y:,. 2g}' ne fonctionne pas.

0
Mark Zhukovsky