Chart.js - Форматування осі Y

Question 1

Я використовую Chart.js, щоб намалювати простий графік штриху, і мені потрібно відформатувати його вісь Y, як

Від 123456,05 до 123 456,05 $

Я не розумію, як користуватися scaleLabel : "<%=value%>"

Я бачив, як хтось вказував на " JS Micro-Templating ",
але я не мав поняття, як це використовувати з нашим scaleLabelваріантом.

Хтось знає, як відформатувати цю вісь Y, і, можливо, навести приклад?

Question 2

У мене була та сама проблема, я думаю, що в Chart.js 2.xx підхід дещо інший, як показано нижче.

ticks: {
    callback: function(label, index, labels) {
        return label/1000+'k';
    }
}

Детальніше

var options = {
    scales: {
        yAxes: [
            {
                ticks: {
                    callback: function(label, index, labels) {
                        return label/1000+'k';
                    }
                },
                scaleLabel: {
                    display: true,
                    labelString: '1k = 1000'
                }
            }
        ]
    }
}

Question 3

Недокументована особливість бібліотеки ChartJS полягає в тому, що якщо ви передасте функцію замість рядка, вона використовуватиме вашу функцію для відображення шкалиLabel осі y.

Отже, хоча, "<%= Number(value).toFixed(2).replace('.',',') + ' $' %>"працює, ви також можете зробити:

scaleLabel: function (valuePayload) {
    return Number(valuePayload.value).toFixed(2).replace('.',',') + '$';
}

Якщо ви робите щось віддалено ускладнене, я рекомендую зробити це замість цього.

Question 4

scaleLabel : "<%= Number(value).toFixed(2).replace('.', ',') + ' $'%>"

Question 5

Як сказав Nevercom, ScaleLable повинен містити javascript, щоб маніпулювати значенням y, просто застосуйте необхідне форматування.

Зверніть увагу, що значенням є рядок.

var options = {      
    scaleLabel : "<%= value + ' + two = ' + (Number(value) + 2)   %>"
};

Приклад jsFiddle

якщо ви хочете встановити ручну шкалу y, ви можете використовувати scaleOverride

var options = {      
    scaleLabel : "<%= value + ' + two = ' + (Number(value) + 2)   %>",

    scaleOverride: true,
    scaleSteps: 10,
    scaleStepWidth: 10,
    scaleStartValue: 0

};

Приклад jsFiddle

Question 6

Chart.js 2.XX

Я знаю, що ця публікація стара. Але якщо хтось шукає більш гнучке рішення, ось воно

var options = {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true,
                    callback: function(label, index, labels) {
                        return Intl.NumberFormat().format(label);
                        // 1,350

                        return Intl.NumberFormat('hi', { 
                            style: 'currency', currency: 'INR', minimumFractionDigits: 0, 
                        }).format(label).replace(/^(\D+)/, '$1 ');
                        // ₹ 1,350

                        // return Intl.NumberFormat('hi', {
                            style: 'currency', currency: 'INR', currencyDisplay: 'symbol', minimumFractionDigits: 2 
                        }).format(label).replace(/^(\D+)/, '$1 ');
                        // ₹ 1,350.00
                    }
                }
            }]
        }
    }

"привіт" - це хінді. Перевірте тут аргумент інших мов
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#Locale_identification_and_negotiation#locales_argument

для отримання додаткового символу валюти
https://www.currency-iso.org/en/home/tables/table-a1.html

Question 7

Тут ви можете знайти хороший приклад того, як форматувати значення осі Y.

Крім того, ви можете використовувати scaleLabel : "<%=value%>"те, що ви згадали. Це в основному означає, що все між тегами <%=та %>буде розглядатися як код JavaScript (тобто ви можете використовувати ifстатисти ...)