Chart.js -格式化Y轴

hmae6n7t  于 2023-04-11  发布在  Chart.js
关注(0)|答案(7)|浏览(203)

我正在使用Chart.js绘制一个简单的条形图,我需要将其Y轴的格式设置为
123456.05至123 456.05 $
我不知道如何使用scaleLabel : "<%=value%>"
我看到有人指着“JS Micro-Templating
但不知道如何使用我们的scaleLabel选项。
有人知道如何格式化这个Y轴,也许给予我一个例子?

tquggr8v

tquggr8v1#

我也遇到了同样的问题,我认为在Chart.js2.x.x中,方法略有不同,如下所示。

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

bvjveswy2#

ChartJS库的一个未记录的特性是,如果传入一个函数而不是字符串,它将使用您的函数来呈现y轴的scaleLabel。
因此,虽然"<%= Number(value).toFixed(2).replace('.',',') + ' $' %>"可以工作,但您也可以这样做:

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

如果你正在做任何复杂的事情,我建议你这样做。

6ju8rftf

6ju8rftf3#

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

chhqkbe14#

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

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

snvhrwxg5#

Chart.js 2.X.X

我知道这个帖子很老了,但是如果有人想寻找更灵活的解决方案,这里就是

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'是印地语。请在此处查看其他locales参数
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

pkwftd7m

pkwftd7m6#

正如Nevercom所说,scaleLable应该包含javascript,因此要操作y值,只需应用所需的格式。
注意,该值是一个字符串。

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

jsFiddle example
如果希望设置手动y缩放,可以使用scaleOverride

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

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

};

jsFiddle example

wbgh16ku

wbgh16ku7#

在这里,您可以找到一个很好的例子,如何格式化Y轴值。
另外,你可以使用你提到的scaleLabel : "<%=value%>",这基本上意味着<%=%>标签之间的所有内容都将被视为JavaScript代码(即你可以使用if语句...)

相关问题