Я попробовал несколько ответов здесь в stackoverflow, но безрезультатно не удалось заставить его работать... Я действительно новичок в Chart.js, поэтому, пожалуйста, потерпите меня.
это то, что я пробовал до сих пор. Добавьте запятые к точкам данных 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
использовал следующий код для диаграмм 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;
}
}
}
}]
}
}
Принятый ответ отлично подходит для диаграмм с одним набором данных на столбец, например, с гистограммой. Расположение жестко закодированного набора данных приводит к сбою решения для диаграмм с множеством наборов данных, таких как линейные диаграммы. Решение заключается в замене расположения индекса жесткого кодированного набора данных (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();
}
}
}
}Я просто spitballing здесь, но, предполагая, что данные - это массив, не могли бы вы просто пропустить и добавить запятые?
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(), нам не нужно изобретать велосипед! Это учитывает и десятичные дроби.
yAxes: [
{
ticks: {
beginAtZero: true,
userCallback: function(value, index, values) {
return value.toLocaleString(); // this is all we need
}
}
}
]
Существует специальная функция 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();
}
}
Тот же метод может быть применен к подсказкам.