使用货币和千位分隔符格式化 Y 轴

小开

最佳答案

你应该能够包括货币前缀的组成标签内的功能..。

var options = {
animation: false,
scaleLabel:
function(label){return  '$' + label.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");}
};

Http://jsfiddle.net/vy0yhd6m/80/

小开

我是 chart.js 的新手，但是为了让 Billy Moon 的回答在最新的版本2.1.6中起作用，我必须这样做。

  var data = {
labels: ["12 AM", "1 AM", "2 AM", "3 AM", "4 AM", "5 AM", "6 AM", "7 AM", "8 AM", "9 AM", "10 AM", "11 AM", "12 PM", "1 PM", "2 PM", "3 PM", "4 PM", "5 PM", "6 PM", "7 PM", "8 PM", "9 PM", "10 PM", "11 PM"],
datasets: [
{
label: "Sales $",
lineTension: 0,
backgroundColor: "rgba(143,199,232,0.2)",
borderColor: "rgba(108,108,108,1)",
borderWidth: 1,
pointBackgroundColor: "#535353",
data: [65, 59, 80, 81, 56, 55, 59, 80, 81, 56, 55, 40, 59, 80, 81, 56, 55, 40, 59, 80, 81, 56, 55, 40]
}
]
};


//var myChart =
new Chart(document.getElementById('sales-summary-today'), {
type: 'line',
data: data,
options: {
animation: false,
legend: {display: false},
maintainAspectRatio: false,
responsive: true,
responsiveAnimationDuration: 0,
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
callback: function(value, index, values) {
if(parseInt(value) >= 1000){
return '$' + value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
} else {
return '$' + value;
}
}
}
}]
}
}
});

再一次，标签格式功能归功于比利 · 穆恩的答案。

小开

对于 Perry Tew 的回答，如果你的斧头上有负的美元数额(例如当显示损益表时) ，你可以使用以下方法:

ticks: {
callback: function(value, index, values) {
if(parseInt(value) > 999){
return '$' + value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
} else if (parseInt(value) < -999) {
return '-$' + Math.abs(value).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
} else {
return '$' + value;
}
}
}

显示负货币的正确格式是-$XXX，因此我们将 -$添加到值之前，然后通过 Math.abs ()运行它，将其转换为正值。

小开

我主要是总结其他人提到的问题，但我认为这个问题的最干净的解决方案是使用带有美元货币格式的 toLocaleString法:

return value.toLocaleString("en-US",{style:"currency", currency:"USD"});

这在所有现代浏览器中都适用。用于 toLocaleString的 Mozilla 文档列出了特定的浏览器兼容性以及其他地区、货币和格式类型(例如百分比)的选项。

Js 版本2 + (2016年4月发布) 需要使用 callback方法高级蜱格式:

var chartInstance = new Chart(ctx, {
type: 'line',
data: data,
options: {
scales: {
yAxes: [{
ticks: {
callback: function(value, index, values) {
return value.toLocaleString("en-US",{style:"currency", currency:"USD"});
}
}
}]
}
}
});

如果使用 Chart.js 版本1. X，语法将是:

var myLineChart = new Chart(ctx).Line(data, options);
var data = {
...
}
var options = {
scaleLabel: function(label) {
return value.toLocaleString("en-US",{style:"currency", currency:"USD"});
}

为引用语法改变感谢 Perry Tew，为这个想法使用 toLocaleString感谢 mfink。

小开

在 chartjs v2.0中，您可以像下面这样设置全局选项:

Chart.defaults.global.tooltips.callbacks.label = function(tooltipItem, data) {
return tooltipItem.yLabel.toLocaleString("en-US");
};


Chart.scaleService.updateScaleDefaults('linear', {
ticks: {
callback: function (value, index, values) {
return value.toLocaleString();
}
}
});

小开

如果你使用 Charts.js 表示角度2 + (ng2-图表) ，你可以使用 CurrencyPipe。下面是我如何设置标签的格式:

在 page.ts 文件中注入依赖项:

import { CurrencyPipe } from '@angular/common';

下面是我在图表选项中对它的称呼:

public chartOptions: any = {
responsive: true,
legend: {
display: false,
labels: {
display: false
}
},
tooltips: {
enabled: true,
mode: 'single',
callbacks: {
label: function(tooltipItem, data) {
let label = data.labels[tooltipItem.index];
let datasetLabel = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
let currencyPipe = new CurrencyPipe('en');
let formattedNumber = currencyPipe.transform(datasetLabel, 'USD', 'symbol');
return label + ': ' + formattedNumber;
}
}
}
};

UPDATE 2022-04-07: Chart.js version 3的语法已经改变。下面是使用 v3时 options 对象的样子:

import { ChartConfiguration, ChartData, ChartType } from 'chart.js';
import { CurrencyPipe } from '@angular/common';


public chart_options: ChartConfiguration['options'] = {
layout: {
padding: 25,
},
responsive: true,
plugins: {
legend: {
display: false,
},
tooltip: {
enabled: true,
callbacks: {
label: function(context) {
let currency_pipe = new CurrencyPipe('en');
return ' ' + context.label + ': ' + currency_pipe.transform(context.parsed, 'USD', 'symbol');
}
}
}
}
};


public chart_type: ChartType = 'doughnut';
public chart_labels: string[] = [];
public chart_data: ChartData<'doughnut'> = {
labels: this.chart_labels,
datasets: [{
data: [],
backgroundColor: [],
}]
};


<div style="display: block;">
<canvas baseChart [data]="chart_data" [options]="chart_options" [type]="chart_type"></canvas>
</div>

查看 Chart.js v3迁移指南获得更多信息

小开

使用 chartjs v2.8.0，在查看了文档之后，我发现它是给你。

我没有制作自己的格式化程序，而是使用数字格式化数字。这就是我的工作:

import numeral from 'numeral'

options: {
scales: {
yAxes: [{
ticks: {
callback: function (value, index, values) {
// add comma as thousand separator
return numeral(value).format('0,0')
},
}
}]
},
tooltips: {
callbacks: {
label: function (tooltipItem, data) {
var label = data.datasets[tooltipItem.datasetIndex].label || ''


if (label) {
label += ': '
}
label += numeral(tooltipItem.yLabel).format('0,0')
return label
},
},
},
}

您可以使用 format('$ 0,0')添加货币符号以及逗号千分隔符。

小开

有一个特定的 javascript 函数可以将一个长数字转换为一个根据系统设置格式化的数字: toLocaleString ()。

你可以通过在蜱选项中添加“ callback:”关键字来指定每个蜱的标签(或者由其编号索引标识的特定蜱的标签)必须由你自己的函数构建:

以前:

        ticks: {
max: maxAltitude,
min: 0
}

之后:

        ticks: {
max: maxAltitude,
min: 0, // <--- dont' foget to add this comma if you already have specified ticks options
callback:
function(value, index, valuesArray) {
// value: currently processed tick label
// index of currently processed tick label
// valuesArray: array containing all predefined labels
return  value.toLocaleString();
} // Function end
} // Ticks options end

没有注释和未使用的变量:

        ticks: {
max: maxAltitude,
min: 0,
callback:
function(value) {
return  value.toLocaleString();
}
}

小开

我知道我的回答为时已晚，但由于行动正在得到更多的关注，这可能有关现在。

这里有一个更简单和体面的方法。

const formatter = new Intl.NumberFormat("en-US", {
style: "currency",
currency: "USD"
}); // Change locale according to your currency and country


var options = {
scales: {
yAxes: [
{
ticks: {
callback: (label, index, labels) => {
return formatter.format(label);
}
}
}
]
}
}