ChartJS 带逗号和两个小数点的数值格式

cclgggtu  于 12个月前  发布在  Chart.js
关注(0)|答案(3)|浏览(221)

我正在使用chart.js来显示我的销售额,问题是我无法将数据转换为带有逗号和两位小数的数字格式。
当数据是一个整数时,输出是正确的。但是,当我显示平均销售额时,我得到的输出如下:
平均销售额(无格式)1000.2017
平均销售额(含格式)1,000.2,017
总销售额(无格式)1000
总销售额(含格式)1,000
如何在JavaScript中正确格式化输出?

tooltips: {
  callbacks: {
     label: function(tooltipItem, data) {
         var value = data.datasets[0].data[tooltipItem.index];
         value = value.toString();
         value = value.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
              return value;
           }
       }
  },
   scales: {
     yAxes: [{
       ticks: {
         userCallback: function(value, index, values) {
           value = value.toString();
           value = value.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
              return value;
         }
        }
    }]
}

字符串

sh7euo9m

sh7euo9m1#

JavaScript为你提供了一些解决方案。下面是我想到的前两个。

1. number.toLocaleString

如前所述,.toLocaleString可以帮助您,但使用maximumFractionDigits代替minimumFractionDigits
如下所示:

number.toLocaleString(undefined, { maximumFractionDigits: 2 })

字符串
所以总结一下:

const decimalsFormated = number.toLocaleString(undefined, { maximumFractionDigits: 2 })


和比

const finalFormated = String(decimalsFormated).replace(/\B(?=(\d{3})+(?!\d))/g, ",");

2. Number.parseFloat + toFixed

let number = 123.1234
Number.parseFloat(number).toFixed(2);


在每种方法中,最好将您的解决方案 Package 在函数中:

function getCommaSeparatedTwoDecimalsNumber(number) {
    const fixedNumber = Number.parseFloat(number).toFixed(2);
    return String(fixedNumber).replace(/\B(?=(\d{3})+(?!\d))/g, ",");

}


你也可以使用正则表达式。我会说这是overaly复杂的,虽然。
另外,需要注意的非常重要的一点是,你可能想也可能不想让你的最终结果更接近。
使用toLocaleString和maxDigits只会删除这两个数字之后的所有内容。使用toFixed会不正确地舍入输出。
此解决方案将适当地舍入它:

Number(Math.round(1.005+'e2')+'e-2').toFixed(2);


点击这里:Format number to always show 2 decimal places
最后一件事,可能是最重要的。取决于什么格式的输入数字将有,上述解决方案可能会或可能不会工作。您需要决定输入格式,如果不能预见,为每种可能性提供格式化程序:
1000000.123124
10000123123
100000,1239
1.12039
1,19012

根据格式,您需要采取的操作顺序可能会有所不同。

neskvpey

neskvpey2#

你可以尝试像这样使用toLocaleString:

value = value.toLocaleString(undefined, { maximumFractionDigits: 2 });

字符串
它将根据您的区域设置数字格式,并在逗号后使用千位分隔符和两位数字。

kgqe7b3p

kgqe7b3p3#

您正在寻找:

  • 逗号
  • 小数点后2位,不管数字是多少。

这是你的函数:

function get4DecimalPointsWithCommas(amount) {
  return amount.toLocaleString(undefined, {
    maximumFractionDigits: 4,
    minimumFractionDigits: 4
  });
}
console.log(get4DecimalPointsWithCommas(33))

字符串

相关问题