[英]Chart.js Add Commas to Tooltip and Y-Axis
我已经在 stackoverflow 中尝试了一些答案,但无济于事。
这是我迄今为止尝试过的。 将逗号添加到 ChartJS 数据点和此Chart.js 数字格式
这是我的代码:
提前致谢。
Chart.defaults.global.legend = {
enabled: false
};
function load_yearly_sales_per_agent(param_year, transaction_url){
$(".custom_loader").show();
$(".custom_graph").hide();
$.ajax({
url:transaction_url,
type:'post',
data: {year : param_year},
dataType:'json',
success:function(result){
// Bar chart
var ctx = document.getElementById("mybarChart");
var mybarChart = new Chart(ctx, {
responsive: true,
multiTooltipTemplate: "<%=addCommas(value)%>",
type: 'bar',
data: {
labels: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
datasets: [{
label: 'Sales Per Month',
backgroundColor: "#26B99A",
data: result
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
$(".custom_loader").hide();
setTimeout(function(){
$(".custom_graph").show();
}, 200);
}
});
}
我想要的是在工具提示和 Y 轴上添加逗号.....
对于您的 yAxes 刻度选项,这将在千位标记处添加逗号:
ticks: {
beginAtZero:true,
userCallback: function(value, index, values) {
value = value.toString();
value = value.split(/(?=(?:...)*$)/);
value = value.join(',');
return value;
}
}
可以在工具提示回调中添加类似的功能。
此FIDDLE 中的完整示例
如果使用小数,则接受的答案不会将逗号放在正确的位置
45000.00 将显示为 45,000,.00
将以下代码用于chartjs ver 2.3
options: {
responsive: true,
maintainAspectRatio: false,
tooltips: {
callbacks: {
label: function(tooltipItem, data) {
var value = data.datasets[0].data[tooltipItem.index];
if(parseInt(value) >= 1000){
return '$' + value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
} else {
return '$' + value;
}
}
} // end callbacks:
}, //end tooltips
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;
}
}
}
}]
}
}
我看到很多过于复杂的答案。
此功能已通过.toLocaleString()
内置到 javascript 中,我们不必重新发明轮子! 这也考虑了小数。
yAxes: [
{
ticks: {
beginAtZero: true,
userCallback: function(value, index, values) {
return value.toLocaleString(); // this is all we need
}
}
}
]
接受的答案适用于每列具有单个数据集的图表,例如条形图。 对于折线图等多数据集图表,硬编码的数据集位置会导致解决方案失败。 解决方案是将硬编码的数据集索引位置( data.datasets[0] )替换为 chartjs 中内置的动态索引位置( data.datasets[tooltipItem.datasetIndex] )。
通过根据用户的区域设置对值进行格式化,可以最好地完成数字的格式化。 这有助于确保数字使用正确的装饰器(千位分隔符可以是逗号或句点,具体取决于用户的语言环境)。
options: { tooltips: { callbacks: { label: function (tooltipItem, data) { var tooltipValue = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index]; return parseInt(tooltipValue).toLocaleString(); } } } }
我只是在这里胡说八道,但是,假设数据是一个数组,您不能循环并添加逗号吗?
datasets: [{
label: 'Sales Per Month',
backgroundColor: "#26B99A",
data: result.map(function (i) {
return i.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")
})
}]
更多货币兑换
ticks: {
beginAtZero: true,
callback: function(label, index, labels) {
return Intl.NumberFormat('hi', { style: 'currency', currency: 'INR', minimumFractionDigits: 2 } )
.format(label).replace(/^(\D+)/, '$1 ');
},
}
// ₹ 1,400.00
有一个特定的 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
没有注释也没有未使用的变量:
ticks: {
max: maxAltitude,
min: 0,
callback:
function(value) {
return value.toLocaleString();
}
}
相同的方法可以应用于工具提示。
(这个例子显示钱)
callback: function(value, index, values){
return value.toLocaleString("en-US",
{style:"currency",
currency:"USD",
minimumFractionDigits: 0,
maximumFractionDigits: 0});
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.