使用ChartJS在Y轴上显示美元符号

8wigbo56  于 2022-11-06  发布在  Chart.js
关注(0)|答案(2)|浏览(218)

我的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;
                    }
                }
            }]
        }
    }
});

这是我的结果。'Before'是没有这个代码,'after'是有.

的。显然,它不仅仅是在值之前添加了一个$,而且还发生了其他事情。
有办法解决吗?

ykejflvf

ykejflvf1#

这里的问题是,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);
                    }
                }
            }]
        }
    }
});
yyhrrdl8

yyhrrdl82#

尝试使用数字JavaScript库(npm安装数字):

import * as numeral from 'numeral'; //npm i numeral

ticks: {
    callback: (value: any) => {
      return numeral(value).format('$0,0.[00]')
    }
}

应该可以了!

相关问题