Chart.js - Formatieren der Y-Achse

Ich verwende Chart.js, um ein einfaches Balkendiagramm zu zeichnen, und ich muss seine Y-Achse wie folgt formatieren

123456.05 bis 123 456,05 $

Ich verstehe nicht, wie man es benutzt scaleLabel : "<%=value%>"

Ich habe jemanden gesehen , der auf " JS Micro-Templating " zeigte,
aber keine Ahnung, wie man das mit unserer scaleLabelOption verwendet.

Weiß jemand, wie man diese Y-Achse formatiert, und gibt mir vielleicht ein Beispiel?

Ich hatte das gleiche Problem, ich denke in Chart.js 2.xx ist der Ansatz etwas anders wie unten.

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

Mehr im Detail

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

Eine undokumentierte Funktion der ChartJS-Bibliothek besteht darin, dass beim Übergeben einer Funktion anstelle einer Zeichenfolge Ihre Funktion zum Rendern des scaleLabel der y-Achse verwendet wird.

Während also "<%= Number(value).toFixed(2).replace('.',',') + ' $' %>"funktioniert, können Sie auch Folgendes tun:

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

Wenn Sie etwas aus der Ferne kompliziert machen, würde ich empfehlen, dies stattdessen zu tun.

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

Wie Nevercom sagte, sollte die scaleLable Javascript enthalten. Um den y-Wert zu manipulieren, wenden Sie einfach die erforderliche Formatierung an.

Beachten Sie, dass der Wert eine Zeichenfolge ist.

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

jsFiddle Beispiel

Wenn Sie eine manuelle y-Skala einstellen möchten, können Sie scaleOverride verwenden

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

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

};

jsFiddle Beispiel

Chart.js 2.XX.

Ich weiß, dass dieser Beitrag alt ist. Aber wenn jemand nach einer flexibleren Lösung sucht, dann ist sie hier genau richtig

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
                    }
                }
            }]
        }
    }

'hi' ist Hindi. Suchen Sie hier nach anderen Gebietsschemargumenten
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#Locale_identification_and_negotiation#locales_argument

Weitere Währungssymbole finden Sie unter
https://www.currency-iso.org/en/home/tables/table-a1.html

Hier finden Sie ein gutes Beispiel für die Formatierung des Y-Achsenwerts.

Sie können auch das verwenden scaleLabel : "<%=value%>", was Sie erwähnt haben. Dies bedeutet im Grunde, dass alles zwischen <%=und %>Tags als Javascript-Code behandelt wird (dh Sie können ifAnweisungen verwenden ...).