如何在 D3.js /C3.js 中格式化数字

Question

我的应用程序支持下面列出的几种数字格式，并希望以该格式显示数字 c3 图表。

NUMBER_FORMAT1="#,###.##" ( decimal separator . and thousand separator , )
NUMBER_FORMAT2="#.###,##" ( decimal separator , and thousand separator . )
NUMBER_FORMAT3="# ###,##" ( decimal separator , and thousand separator space )
NUMBER_FORMAT4="# ###.##" ( decimal separator . and thousand separator space )

Answer 1

您可以为此使用 d3 的格式函数 (https://github.com/mbostock/d3/wiki/Formatting)

var chart = c3.generate({
    data: {
        columns: [
            ['data1', 30, 200, 100, 400, 20050, 100],
        ]
    },
    tooltip: {
        format: {
            value: function(value) {
                return d3.format(",.2f")(value)
            }
        }
    }
});

以您的第一种格式提供工具提示。您可以在 C3 接受格式说明符的任何地方使用它。

---

小提琴 - http://jsfiddle.net/6j2hys0s/

---

但是，对于其他格式，您必须使用正则表达式来交换 , 和 .用你想要的字符。

// #.###,##
return d3.format(",.2f")(value).replace('.', ' ').replace(/,/g, '.').replace(' ', ',')

// # ###,##
return d3.format(",.2f")(value).replace(/,/g, ' ').replace(/\./, ',');

// # ###.##
return d3.format(",.2f")(value).replace(/,/g, ' ');

Answer 2

使用 d3 中支持的语言环境的概念

1. 根据数字格式创建 4 个语言环境
2. 指定数字样式

示例代码

// #,###.##
 var D3_LOCALE_NUMBER_FORMAT1 = d3.locale({
    "decimal": ".",
    "thousands": ",",
    "grouping": [3],
    "currency": ["USD", ""],
    "dateTime": "%a %b %e %X %Y",
    "date": "%d-%m-%Y",
    "time": "%H:%M:%S",
    "periods": ["AM", "PM"],
    "days": ["Zondag", "Maandag", "Dinsdag", "Woensdag", "Donderdag", "Vrijdag", "Zaterdag"],
    "shortDays": ["Zo", "Ma", "Di", "Wo", "Do", "Vr", "Za"],
    "months": ["Januari", "Februari", "Maart", "April", "Mei", "Juni", "Juli", "Augustus", "September", "Oktober", "November", "December"],
    "shortMonths": ["Jan", "Feb", "Mar", "Apr", "Mei", "Jun", "Jul", "Aug", "Sep", "Okt", "Nov", "Dec"]
});

// #.###,##
var D3_LOCALE_NUMBER_FORMAT2 = d3.locale({
    "decimal": ",",
    "thousands": ".",
    "grouping": [3],
    "currency": ["USD", ""],
    "dateTime": "%a %b %e %X %Y",
    "date": "%d-%m-%Y",
    "time": "%H:%M:%S",
    "periods": ["AM", "PM"],
    "days": ["Zondag", "Maandag", "Dinsdag", "Woensdag", "Donderdag", "Vrijdag", "Zaterdag"],
    "shortDays": ["Zo", "Ma", "Di", "Wo", "Do", "Vr", "Za"],
    "months": ["Januari", "Februari", "Maart", "April", "Mei", "Juni", "Juli", "Augustus", "September", "Oktober", "November", "December"],
    "shortMonths": ["Jan", "Feb", "Mar", "Apr", "Mei", "Jun", "Jul", "Aug", "Sep", "Okt", "Nov", "Dec"]
});

// # ###,##
var D3_LOCALE_NUMBER_FORMAT3 = d3.locale({
    "decimal": ",",
    "thousands": " ",
    "grouping": [3],
    "currency": ["USD", ""],
    "dateTime": "%a %b %e %X %Y",
    "date": "%d-%m-%Y",
    "time": "%H:%M:%S",
    "periods": ["AM", "PM"],
    "days": ["Zondag", "Maandag", "Dinsdag", "Woensdag", "Donderdag", "Vrijdag", "Zaterdag"],
    "shortDays": ["Zo", "Ma", "Di", "Wo", "Do", "Vr", "Za"],
    "months": ["Januari", "Februari", "Maart", "April", "Mei", "Juni", "Juli", "Augustus", "September", "Oktober", "November", "December"],
    "shortMonths": ["Jan", "Feb", "Mar", "Apr", "Mei", "Jun", "Jul", "Aug", "Sep", "Okt", "Nov", "Dec"]
});

// # ###.##
var D3_LOCALE_NUMBER_FORMAT4 = d3.locale({
    "decimal": ".",
    "thousands": " ",
    "grouping": [3],
    "currency": ["USD", ""],
    "dateTime": "%a %b %e %X %Y",
    "date": "%d-%m-%Y",
    "time": "%H:%M:%S",
    "periods": ["AM", "PM"],
    "days": ["Zondag", "Maandag", "Dinsdag", "Woensdag", "Donderdag", "Vrijdag", "Zaterdag"],
    "shortDays": ["Zo", "Ma", "Di", "Wo", "Do", "Vr", "Za"],
    "months": ["Januari", "Februari", "Maart", "April", "Mei", "Juni", "Juli", "Augustus", "September", "Oktober", "November", "December"],
    "shortMonths": ["Jan", "Feb", "Mar", "Apr", "Mei", "Jun", "Jul", "Aug", "Sep", "Okt", "Nov", "Dec"]
});

 var yAxisNumberFormat=NUMBER_FORMAT1; 
 var defaultNumberFormat=NUMBER_FORMAT1;

 //Scientific Prefix "s" because on Y axis we show 1000 as 1k, 1000000 as 1M 
 var numberStyle_Scientific="s";
 // Fixed number format "f" because we dont want to show any precision(decimal) numbers
 // the , (comma) indicates SHOW thousands separator.
 //( NOTE:This doesn't mean that comma(,) is the thousand separartor.)
 var numberStyle_Fixed=",f";

 if(USER_NUMBER_FORMAT==NUMBER_FORMAT1){
    yAxisNumberFormat=D3_LOCALE_NUMBER_FORMAT1.numberFormat(numberStyle_Scientific); 
    defaultNumberFormat=D3_LOCALE_NUMBER_FORMAT1.numberFormat(numberStyle_Fixed); 
 } else if(USER_NUMBER_FORMAT==NUMBER_FORMAT2){ 
    yAxisNumberFormat=D3_LOCALE_NUMBER_FORMAT2.numberFormat(numberStyle_Scientific); 
    defaultNumberFormat=D3_LOCALE_NUMBER_FORMAT2.numberFormat(numberStyle_Fixed); 
 } else if(USER_NUMBER_FORMAT==NUMBER_FORMAT3){ 
    yAxisNumberFormat=D3_LOCALE_NUMBER_FORMAT3.numberFormat(numberStyle_Scientific);
    defaultNumberFormat=D3_LOCALE_NUMBER_FORMAT3.numberFormat(numberStyle_Fixed);   
 } else if(USER_NUMBER_FORMAT==NUMBER_FORMAT4){ 
    yAxisNumberFormat=D3_LOCALE_NUMBER_FORMAT4.numberFormat(numberStyle_Scientific); 
    defaultNumberFormat=D3_LOCALE_NUMBER_FORMAT4.numberFormat(numberStyle_Fixed); 
 } 

有了这个，你只需要使用 defaultNumberFormat(yourNumber); yAxisNumberFormat(yourNumber);

Answer 3

您可以设置自己的格式功能

axis : {
    x : {
        type : 'linear',
        tick: {
            format: function (x) { return x + ' km'; }

        }
    }
}

Answer 4

我想将此链接添加到很棒的demo page。当您可以为您的案例选择所需的格式说明符时，这是一个游乐场。当您不记得/不知道应该将什么格式说明符传递给 d3.format 函数时，它非常有用。