我已经在stackoverflow中尝试了几个答案,但无济于事使它无法正常工作..我是Chart.js的新手,所以请耐心等待。
这是我到目前为止所尝试过的。 Add Commas to ChartJS Data Points和此Chart.js number format
这是我的代码:
提前感谢。
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轴上添加逗号.....
答案 0 :(得分:11)
对于yAxes刻度选项,这将在数千个标记处添加逗号:
ticks: {
beginAtZero:true,
userCallback: function(value, index, values) {
value = value.toString();
value = value.split(/(?=(?:...)*$)/);
value = value.join(',');
return value;
}
}
可以在工具提示回调中添加类似的功能。
中的完整示例答案 1 :(得分:10)
如果使用小数,则接受的答案不会将逗号放在正确的位置
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;
}
}
}
}]
}
}
答案 2 :(得分:3)
对于每列具有单个数据集的图表(例如条形图),接受的答案可以正常工作。硬编码数据集位置导致解决方案对于多数据集图表(例如折线图)失败。解决方案是使用内置于chartjs中的动态索引位置替换硬编码数据集索引位置( data.datasets [0] )( data.datasets [tooltipItem.datasetIndex] )
通过根据用户的区域设置格式化值,可以最好地完成数字的格式设置。这有助于确保数字使用正确的装饰器(千位分隔符可以是逗号或句点,具体取决于用户的区域设置)。
options: {
tooltips: {
callbacks: {
label: function (tooltipItem, data) {
var tooltipValue = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
return parseInt(tooltipValue).toLocaleString();
}
}
}
}
答案 3 :(得分:3)
对此,我看到了很多过于复杂的答案。
此功能已经内置在.toLocaleString()
的javascript中,我们无需重新发明!这也占了小数。
yAxes: [
{
ticks: {
beginAtZero: true,
userCallback: function(value, index, values) {
return value.toLocaleString(); // this is all we need
}
}
}
]
答案 4 :(得分:1)
更多货币换算
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
答案 5 :(得分:0)
我只是在这里spitballing但是,假设数据是一个数组,你不能只是循环并添加逗号吗?
datasets: [{
label: 'Sales Per Month',
backgroundColor: "#26B99A",
data: result.map(function (i) {
return i.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")
})
}]
答案 6 :(得分: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();
}
}
相同的方法可以应用于工具提示。
答案 7 :(得分:0)
(此示例显示货币)
callback: function(value, index, values){
return value.toLocaleString("en-US",
{style:"currency",
currency:"USD",
minimumFractionDigits: 0,
maximumFractionDigits: 0});
}