Charts.js 使用货币和千位分隔符格式化 Y 轴
Posted
技术标签:
【中文标题】Charts.js 使用货币和千位分隔符格式化 Y 轴【英文标题】：Charts.js Formatting Y Axis with both Currency and Thousands Separator 【发布时间】：2015-04-15 21:35:17 【问题描述】：我正在使用 Charts.js 在我的网站上显示图表。目前，标签显示为一长串数字（即 123456）。 我希望它显示为带有千位分隔符的货币：（即 $123,456）
我正在使用 scaleLabel 选项在值之前放置一个 $ USD 符号：
scaleLabel: "<%= ' $' + Number(value)%>"
以及插入逗号分隔符的函数：
function(label)return label.value.toString().replace(/\B(?=(\d3)+(?!\d))/g, ",");
我只是不知道如何将它们一起使用来获得我想要的东西。
这里是小提琴：http://jsfiddle.net/vy0yhd6m/79/
（请记住，目前该图表只有在您删除上面引用的这两个 javascript 片段之一时才能工作）
感谢您的任何帮助。
【问题讨论】：
哇这个问题被浏览了近 4000 次！请 - 如果这个问题对您有用，请务必点赞！ 回答 - ***.com/a/38299304/1374554 【参考方案1】：您应该能够在函数内的标签组合中包含货币前缀...
var options =
animation: false,
scaleLabel:
function(label)return '$' + label.value.toString().replace(/\B(?=(\d3)+(?!\d))/g, ",");
;
http://jsfiddle.net/vy0yhd6m/80/
【讨论】：
谢谢你成功了！当网站允许时，我会在 7 分钟内接受你的回答:-) 这仅适用于 Chart.js 的 1.x，如果您需要 2.x 或更高版本的答案，请向下滚动。 这不适用于包含多个值的“复杂” scaleLabel，您需要 something1: something1, something2: something2, callback: function(label) etc. etc.【参考方案2】：我是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(?=(\d3)+(?!\d))/g, ",");
else
return '$' + value;
]
);
再次感谢 Billy Moon 对标签格式化功能的回答。
【讨论】：
这是图表 v2 的解决方案。 ***.com/questions/20371867/chart-js-formatting-y-axis/… 列出的其他解决方案似乎不适用于最新版本 太棒了。像魅力一样工作！ 谢谢！我们也可以使用toLocaleString 代替所有的正则表达式和条件，只是简单的：return "$" + parseInt(value).toLocaleString();
感谢您放置完整的选项对象。当您是寻找类似答案的局外人时，您不知道所有这些选项嵌套在哪里，我们避免浪费时间。此外，它绝对正确且有效：p。【参考方案3】：
除了 Perry Tew 的回答之外，如果您的坐标轴上有负美元金额（例如，在显示损益图表时），您可以使用这个：
ticks:
callback: function(value, index, values)
if(parseInt(value) > 999)
return '$' + value.toString().replace(/\B(?=(\d3)+(?!\d))/g, ",");
else if (parseInt(value) < -999)
return '-$' + Math.abs(value).toString().replace(/\B(?=(\d3)+(?!\d))/g, ",");
else
return '$' + value;
显示负数货币的正确格式是 -$XXX，因此我们将 -$ 添加到该值之前，然后通过 Math.abs() 运行它，将其转换为正数。
【讨论】：
【参考方案4】：我主要是在总结其他人提到的内容，但我认为这个确切（并且经常遇到的）问题的最简洁的解决方案是使用带有美元货币格式的 the toLocaleString method：
return value.toLocaleString("en-US",style:"currency", currency:"USD");
这适用于所有现代浏览器。 Mozilla documentation for toLocaleString 列出了特定的浏览器兼容性以及其他区域设置、货币和格式类型（例如百分比）的选项。
注意 Chart.js 版本 2+（2016 年 4 月发布）requires using the callback method 用于高级刻度格式：
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 Version 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 提供 referencing the syntax change，感谢 mfink 提供 the idea 使用 toLocaleString。
【讨论】：
为什么你认为这对工具提示不起作用？试着把它放在我的工具提示回调中，什么都没有 对于那些想从货币中去除小数点的人：style:"currency", currency:"USD",minimumFractionDigits:0,maximumFractionDigits:0
如果符号可以改变怎么办？你怎么能通过它，以及放置（之前/之后）的数字？【参考方案5】：
在 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();
);
【讨论】：
【参考方案6】：如果您将 Charts.js 用于 Angular 2+ (ng2-charts)，您可以使用 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;
;
【讨论】：
【参考方案7】：使用chartjs v2.8.0，查了一下文档，找到了here。
我没有制作自己的格式化程序，而是使用numeraljs 来格式化数字。 所以这就是我所做的：
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') 来添加货币符号以及逗号千位分隔符。
【讨论】：
【参考方案8】：有一个特定的javascript函数可以将长数字转换为根据系统设置格式化的数字：toLocaleString()。
您可以指定每个刻度（或由其编号索引标识的特定刻度）的标签必须由您自己的函数构建，方法是在刻度选项中添加“回调：”关键字：
之前：
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
没有 cmets 也没有未使用的变量：
ticks:
max: maxAltitude,
min: 0,
callback:
function(value)
return value.toLocaleString();
【讨论】：
【参考方案9】：我知道我的回答为时已晚，但由于操作越来越受到关注，这可能与现在有关。
这是更简单和体面的方法。
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);
]
【讨论】：
以上是关于Charts.js 使用货币和千位分隔符格式化 Y 轴的主要内容，如果未能解决你的问题，请参考以下文章
Javascript 从 NumberFormat 获取小数和千位分隔符