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

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

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

        }
    }
}

Answer 3

使用d3

中支持的语言环境的概念

根据数字格式
指定数字样式

示例代码

// #,###.##
 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 4

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

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

4 个答案: