web-dev-qa-db-fra.com

Charts.js Formatage de l'axe Y avec séparateur de devise et de milliers

J'utilise Charts.js pour afficher un graphique sur mon site. Actuellement, l’étiquette s’affiche sous la forme d’une longue chaîne de chiffres (par exemple, 123456). Je veux qu’elle apparaisse en monnaie avec séparateur de milliers: (c.-à-d. 123 456 $)

J'utilise l'option scaleLabel pour mettre un symbole $ USD avant la valeur:

scaleLabel: "<%= ' $' + Number(value)%>"

et une fonction pour insérer le séparateur de virgule:

function(label){return label.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");}

Je ne sais tout simplement pas comment les utiliser ensemble pour obtenir ce que je veux.

Voici le violon: http://jsfiddle.net/vy0yhd6m/79/

(N'oubliez pas qu'actuellement, le graphique ne fonctionnera que si vous supprimez l'un de ces deux scripts JavaScript cités ci-dessus.)

Merci pour toute aide.

javascriptfunctionchart.js
50
NickyTheWrench

Vous devriez pouvoir inclure le préfixe de devise dans la composition de l'étiquette dans la fonction ...

var options = {
    animation: false,
    scaleLabel:
    function(label){return  '$' + label.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");}
};

http://jsfiddle.net/vy0yhd6m/80/

33
Billy Moon

Je suis nouveau dans chart.js, mais voici ce que je devais faire pour que la réponse de Billy Moon fonctionne avec la dernière version 2.1.6.

  var data = {
    labels: ["12 AM", "1 AM", "2 AM", "3 AM", "4 AM", "5 AM", "6 AM", "7 AM", "8 AM", "9 AM", "10 AM", "11 AM", "12 PM", "1 PM", "2 PM", "3 PM", "4 PM", "5 PM", "6 PM", "7 PM", "8 PM", "9 PM", "10 PM", "11 PM"],
    datasets: [
      {
        label: "Sales $",
        lineTension: 0,
        backgroundColor: "rgba(143,199,232,0.2)",
        borderColor: "rgba(108,108,108,1)",
        borderWidth: 1,
        pointBackgroundColor: "#535353",
        data: [65, 59, 80, 81, 56, 55, 59, 80, 81, 56, 55, 40, 59, 80, 81, 56, 55, 40, 59, 80, 81, 56, 55, 40]
      }
    ]
  };

  //var myChart =
  new Chart(document.getElementById('sales-summary-today'), {
    type: 'line',
    data: data,
    options: {
      animation: false,
      legend: {display: false},
      maintainAspectRatio: false,
      responsive: true,
      responsiveAnimationDuration: 0,
      scales: {
        yAxes: [{
          ticks: {
            beginAtZero: true,
            callback: function(value, index, values) {
              if(parseInt(value) >= 1000){
                return '$' + value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
              } else {
                return '$' + value;
              }
            }
          }
        }]
      }
    }
  });

Encore une fois, la réponse de Billy Moon à la fonction de formatage des étiquettes est à mettre au crédit.

81
Perry Tew

Je résume principalement ce que d'autres ont mentionné, mais je pense que la solution la plus propre à cette question exacte (et fréquemment rencontrée) est d'utiliser la méthode toLocaleString avec le format de devise USD:

return value.toLocaleString("en-US",{style:"currency", currency:"USD"});

Cela fonctionne dans tous les navigateurs modernes. Le documentation de Mozilla pour toLocaleString répertorie la compatibilité de navigateur spécifique et des options pour d'autres paramètres régionaux, devises et types de formatage (par exemple, des pourcentages).

Note Chart.js Version 2+ (publié en avril 2016) nécessite l'utilisation de la méthode callback pour le formatage avancé des ticks:

var chartInstance = new Chart(ctx, {
  type: 'line',
  data: data,
  options: {
     scales: {
       yAxes: [{
         ticks: {
           callback: function(value, index, values) {
             return value.toLocaleString("en-US",{style:"currency", currency:"USD"});
           }
         }
       }]
     }
   }
 });

Si vous utilisez Chart.js version 1.X , la syntaxe est la suivante:

var myLineChart = new Chart(ctx).Line(data, options);
var data = {
  ...
}
var options = {
  scaleLabel: function(label) {
    return value.toLocaleString("en-US",{style:"currency", currency:"USD"});
}

Nous remercions Perry Tew pour faisant référence au changement de syntaxe , et à mfink pour l'idée d'utiliser toLocaleString.

26
AJ Arora

En ajoutant à la réponse de Perry Tew, si vous avez des montants en dollars négatifs sur vos axes (par exemple, lors de l'affichage d'un graphique de résultat), vous pouvez utiliser ceci:

ticks: {
    callback: function(value, index, values) {
        if(parseInt(value) > 999){
            return '$' + value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
        } else if (parseInt(value) < -999) {
            return '-$' + Math.abs(value).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
        } else {
            return '$' + value;
        }
    }
}

Le format correct pour l’affichage des devises négatives est - $ XXX, nous ajoutons donc -$ à la valeur, puis exécutez-la via Math.abs (), qui la convertit en valeur positive.

7
Ege Ersoz

Dans chartjs v2.0, vous pouvez définir une option globale comme celle-ci:

Chart.defaults.global.tooltips.callbacks.label = function(tooltipItem, data) {
    return tooltipItem.yLabel.toLocaleString("en-US");
};

Chart.scaleService.updateScaleDefaults('linear', {
    ticks: {
        callback: function (value, index, values) {
            return value.toLocaleString();
        }
    }
});
6
Son Dang

Si vous utilisez Charts.js pour Angular 2+ (ng2-charts)), vous pouvez utiliser CurrencyPipe. Voici comment j'ai formaté le libellé:

Injectez la dépendance dans votre fichier page.ts:

import { CurrencyPipe } from '@angular/common';

Voici comment je l'appelle dans mes options de graphique:

public chartOptions: any = {
        responsive: true,
        legend: {
            display: false,
            labels: {
                display: false
            }
        },
        tooltips: {
          enabled: true,
          mode: 'single',
          callbacks: {
            label: function(tooltipItem, data) {
              let label = data.labels[tooltipItem.index];
              let datasetLabel = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
              let currencyPipe = new CurrencyPipe('en');
              let formattedNumber = currencyPipe.transform(datasetLabel, 'USD', 'symbol');
              return label + ': ' + formattedNumber;
            }
          }
        }
    };
2
NickyTheWrench

À l’aide de chartjs v2.8.0, après avoir jeté un coup d’œil aux docs, je l’ai trouvé ici .

Au lieu de créer mon propre formateur, j'utilise numeraljs pour formater le nombre. Alors voici ce que je fais:

import numeral from 'numeral'

options: {
  scales: {
    yAxes: [{
      ticks: {
        callback: function (value, index, values) {
          // add comma as thousand separator
          return numeral(value).format('0,0')
        },
      }
    }]
  },
  tooltips: {
    callbacks: {
      label: function (tooltipItem, data) {
        var label = data.datasets[tooltipItem.datasetIndex].label || ''

        if (label) {
          label += ': '
        }
        label += numeral(tooltipItem.yLabel).format('0,0')
        return label
      },
    },
  },
}

Vous pouvez utiliser format('$ 0,0') pour ajouter un symbole monétaire avec un séparateur de milliers de virgules.

1
Christhofer Natalius