y 軸上的美元符號與 ChartJS

Question

我的 Chart.js 圖表 Y 軸上的標簽前面應該有一個美元符號，因為它們是貨幣價值。

此代碼在文檔中，但對我不起作用。

var chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    // Include a dollar sign in the ticks
                    callback: function(value, index, values) {
                        return '$' + value;
                    }
                }
            }]
        }
    }
});

這是我的結果。 “之前”沒有此代碼，“之后”有。 顯然它不僅僅是在值之前添加一個$ ，而且還發生了其他事情。

知道如何解決這個問題嗎？

Answer 1

這里的問題是chart.js不會四舍五入字符串，因為它不應該為您這樣做。

當您在數字后附加一個字符串時，JavaScript會為您轉換它，並且您無法控制精度。

您可以使用toFixed解決您的問題：

// Define wherever decimals:
const decimals = 3;
// ...
var chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    // Include a dollar sign in the ticks
                    callback: function(value, index, values) {
                        return '$' + value.toFixed(decimals);
                    }
                }
            }]
        }
    }
});

Answer 2

嘗試使用 Numeral JavaScript 庫（npm install numeral）：

 import * as numeral from 'numeral'; //npm i numeral ticks: { callback: (value: any) => { return numeral(value).format('$0,0.[00]') } }

這應該夠了吧！

Answer 3

Chart JS 3+ 的語法已從當前接受的答案更改。 新格式如下——

options: {
    scales: {
        y: {
            ticks: {
                // Include a dollar sign in the ticks
                callback: function(value, index, ticks) {
                    return '$' + value;
                }
            }
        }
    }
}

https://www.chartjs.org/docs/latest/axes/labelling.html