Chart.js - 格式化Y轴

Question

我正在使用Chart.js绘制一个简单的条形图,我需要格式化它的Y轴

123456.05至123 456,05 $

我不明白怎么用 scaleLabel : "<%=value%>"

我看到有人指着 " JS Micro-Templating ",
但不知道如何使用我们的scaleLabel选项.

有人知道如何格式化这个Y轴,也许给我一个例子？

Answer 1

我有同样的问题,我认为在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'
                }
            }
        ]
    }
}

Answer 2

ChartJS库的一个未记录的功能是,如果传入函数而不是字符串,它将使用您的函数来渲染y轴的scaleLabel.

所以,虽然"<%= Number(value).toFixed(2).replace('.',',') + ' $' %>"有效,但您也可以这样做:

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

如果你做任何远程复杂的事情,我建议你这样做.

Answer 3

对于任何使用 的人3.X.X，这里是更改 y 轴标签的更新语法：

scales: {
  y: {
    ticks: {
      callback: (label) => `$ ${label}`,
    },
  },
},

Answer 4

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

Answer 5

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

Answer 6

正如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例子