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

cclgggtu  于 2024-01-07  发布在  Chart.js
关注(0)|答案(3)|浏览(288)

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

  1. tooltips: {
  2. callbacks: {
  3. label: function(tooltipItem, data) {
  4. var value = data.datasets[0].data[tooltipItem.index];
  5. value = value.toString();
  6. value = value.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
  7. return value;
  8. }
  9. }
  10. },
  11. scales: {
  12. yAxes: [{
  13. ticks: {
  14. userCallback: function(value, index, values) {
  15. value = value.toString();
  16. value = value.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
  17. return value;
  18. }
  19. }
  20. }]
  21. }

字符串

sh7euo9m

sh7euo9m1#

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

1. number.toLocaleString

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

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

字符串
所以总结一下:

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


和比

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

2. Number.parseFloat + toFixed

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


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

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


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

  1. 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:

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

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

kgqe7b3p

kgqe7b3p3#

您正在寻找:

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

这是你的函数:

  1. function get4DecimalPointsWithCommas(amount) {
  2. return amount.toLocaleString(undefined, {
  3. maximumFractionDigits: 4,
  4. minimumFractionDigits: 4
  5. });
  6. }
  7. console.log(get4DecimalPointsWithCommas(33))

字符串

相关问题