Question

如何格式化图表栏y轴的货币值：

R$ 123.456,00

而不是：

R$ 123,456.00

目前我正在使用此功能进行格式化，但无法进行这种简单的更改：

var format = d3.format(',.2f'); // Need to change this, but don't know how

chart.yAxis.tickFormat(function(d) {
    return "R$ " + format(d);
});

我已经在D3文档中搜索过，但找不到任何内容。

Answer 1

格式方法似乎不允许自定义千位和小数分隔符。我认为你应该自己替换这些符号：

var format = d3.format(',.2f');

// Format the number, adding thousands and decimal separators
var label = format(1234.00);

// Replace the . and the , symbols. The ! symbol is necessary to do the swap
// it can be other symbol though
label = label.replace('.', '!');
label = label.replace(',', '.');
label = label.replace('!', ',');

// The result is 'R$ 1.234,00'
d3.select('#chart').append('p').text('R$ ' + label);

此jsfiddle包含替换代码。

Answer 2

使用d3 5.5，您可以创建自定义语言环境

https://github.com/d3/d3-format#formatLocale

还要在说明符中注意（传递给.format的arg），我现在包含一个$，它将在格式化的字符串中自动包含货币前缀。

const customD3Locale = d3.formatLocale({
  decimal: ",",
  thousands: ".",
  grouping: [3],
  currency: ["R$",""]
})

const format = customD3Locale.format('$,.2f');

格式化y轴

2 个答案: