Graphique.js formatage de L'axe Y avec séparateur de devises et de milliers

j'utilise des graphiques.js pour afficher un graphique sur mon site. Actuellement, le label apparaît comme une longue chaîne de nombres (I. e 123456). Je veux qu'elle apparaisse comme une devise avec des milliers de séparateurs: (I. e $ 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 pas comment utiliser ces ensemble pour obtenir ce que je veux.

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

(s'il vous plaît garder à l'esprit que actuellement le graphique ne fonctionnera que si vous supprimez l'un de ces deux morceaux de JavaScript cité ci-dessus)

je vous Remercie pour toute aide.

35
demandé sur NickyTheWrench 2015-02-15 08:46:59

5 réponses

vous devriez être en mesure d'inclure le préfixe de devise dans la composition de l'étiquette à l'intérieur de la fonction... 

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

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

30
répondu Billy Moon 2015-02-15 05:53:27

je suis nouveau dans le chart.js, mais voici ce que j'ai dû 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, le crédit va à la réponse de Billy Moon pour la fonction de formatage de l'étiquette.

59
répondu Perry Tew 2016-12-07 13:02:16

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

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

Cela fonctionne dans tous les navigateurs modernes. La documentation Mozilla pour toLocaleString liste la compatibilité spécifique du navigateur et les options pour les autres locales, devises, et les types de formatage (par exemple, les pourcentages).

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

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"});
           }
         }
       }]
     }
   }
 });

La syntaxe si vous utilisez Graphique.js Version 1.X serait: 

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

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

18
répondu AJ Arora 2017-05-23 10:31:37

pour ajouter à la réponse de Perry Tew, si vous avez des montants en dollars négatifs sur vos axes (par exemple en affichant un tableau des profits/pertes), 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 afficher les devises négatives est-XXX$, donc nous préparons -$ à la valeur, puis l'exécutons à travers les mathématiques.abs(), qui le convertit en positif.

7
répondu Ege Ersoz 2016-08-06 02:02:54

dans chartjs v2.0, Vous pouvez définir des options globales comme ceci: 

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();
        }
    }
});
1
répondu Son Dang 2018-04-10 18:22:24