Chart.js - Formatieren der Y-Achse

79

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?

string-formatting chart.js

— Pierre de LESPINAY
quelle

1

OP: Bitte überdenken Sie die gewählte Antwort

— vsync

162

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

— Jaison
quelle

3

es ist schön das zu hören.

— Jaison

4

Dies scheint auch der richtige Weg zu sein, um mit angle-chart.js

— user1576978

3

Diese Ans muss akzeptiert werden. Ich denke, dies wird auf neuen Versionen funktionieren, wahrscheinlich auf 2.xx und höher. Ich habe eine neue Version und habe viele andere Lösungen im Web ausprobiert, aber nichts hat funktioniert. Dies ist das einzige, was für mich funktioniert ..

— Justin

2

Das funktioniert gut. Dies sollte als Antwort akzeptiert werden. Ich habe eine Stunde gebraucht, um das zu finden. Warum dies nicht in der Dokumentation steht, ist mir ein Rätsel. Wie hast du das gefunden, Jaison?

— Jay

2

Vielen Dank für diese Antwort, hat mir bei meinem Projekt sehr geholfen.

— Mikey242

56

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.

— Jacobangel
quelle

Das ist eigentlich die beste Antwort hier. Aufgrund einer einfachen IF wird die Funktion direkt aufgerufen, anstatt den eingebetteten Vorlagenparser auszuführen, der den JS-Code indirekt aufruft.

— Schlingel

14

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

— vicentedealencar
quelle

warum funktioniert es nicht für mich. Bitte hilf mir. stackoverflow.com/questions/39256476/…

— Unbreakable

5

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

— Stuart
quelle

1

Sehr klar, ich war verwirrt, wie man scaleLabel mit benutzerdefinierten Werten verwendet. Danke +1

— MasoodUrRehman

5

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

— Dexter
quelle

Arbeitete wie Charme! ty!

— Mohammed A. Fadil

2

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 ...).

— Nevercom
quelle