如何在JavaScript中的图表JS中赚钱格式

时间:2019-07-05 06:55:48

标签: javascript angularjs chart.js

enter image description here

以上是我使用javascript在图表栏中显示的数据,我不知道如何格式化标签中的金额:“ 11,372,626”。

下面是在图表栏中显示数据的方法。

$scope.listData = response.data.respone; //all of my Json Data
let myLabels = []; //For label
let myDataset = []; //for money label
for(let i = 0; i< $scope.listData.length; i++) {  //looping the datas
    myLabels.push($scope.listData[i].period);
    myDataset.push($scope.listData[i].sales);
}
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: myLabels,
        datasets: [{
            label: 'Sales Store',
            // data: [12, 19, 3, 5, 2, 3],
            data: myDataset,
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)',
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255,99,132,1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)',
                'rgba(255, 159, 64, 1)',
                'rgba(255, 159, 64, 1)',
                'rgba(255, 159, 64, 1)',
                'rgba(255, 159, 64, 1)',
                'rgba(255, 159, 64, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:false
                }
            }]
        }
    }
});

数据来自json格式的API,如何格式化货币数据以便可以在标签中显示?

1 个答案:

答案 0 :(得分:0)

您可以尝试以下方法:

const formatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
});
...
options: {
  tooltips: {
    callbacks: {
      label: function(tooltipItem, data) {
        return formatter.format(tooltipItem.yLabel);
      },
    },
  },
},

example