Я использую Charts.js, чтобы показать график на моем сайте. В настоящее время метка отображается как длинная строка чисел (т.е. 123456). Я хочу, чтобы он отображался как валюта с разделителем тысяч: (т.е. 123 456 долларов)
Я использую параметр scaleLabel, чтобы поместить символ $USD перед значением:
scaleLabel: "<%= ' $' + Number(value)%>"
и функцию для вставки разделителя запятой:
function(label){return label.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");}
Я просто не знаю, как использовать их вместе, чтобы получить то, что я хочу.
Вот скрипка: http://jsfiddle.net/vy0yhd6m/79/
(помните, что в данный момент график будет работать, только если вы удалите один из этих двух фрагментов JavaScript, приведенных выше)
Спасибо за любую помощь.
Вы должны иметь возможность включать префикс валюты в состав внутренней функции метки...
var options = {
animation: false,
scaleLabel:
function(label){return '$' + label.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");}
};
Я новичок в chart.js, но вот что мне нужно сделать, чтобы заставить Билли Мун ответить на работу с последней версией 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;
}
}
}
}]
}
}
});
Снова, кредит идет на Billy Moon Answer для функции форматирования метки.
Я в основном суммирую то, что упомянули другие, но я думаю, что самым чистым решением этого точного (и часто встречающегося) вопроса является использование метода toLocaleString с форматированием валюты в долларах США:
return value.toLocaleString("en-US",{style:"currency", currency:"USD"});
Это работает во всех современных браузерах. В документации Mozilla для toLocaleString перечислены конкретные совместимость браузера и параметры для других локалей, валют и типов форматирования (например, проценты).
Примечание. Для версии Chart.js 2+ (выпущенной в апреле 2016 г.) для расширенного форматирования тиков необходимо использовать метод 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"});
}
Благодарим Перри Тью за ссылку на изменение синтаксиса и mfink за идею использовать toLocaleString.
Добавляя к 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(), который преобразует его в положительный.
В 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 для 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;
}
}
}
};
Используя 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();
}
}