Question

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

123456.05至123 456,05 $

我不明白如何使用scaleLabel : "<%=value%>"

我看到someone pointing到“JS Micro-Templating”，
但不知道如何在我们的scaleLabel选项中使用它。

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

Answer 1

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

SELECT id_pet AS 'number', name_pet AS (null | blank) FROM PETS

更多细节

ticks: {
    callback: function(label, index, labels) {
        return label/1000+'k';
    }
}

Answer 2

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

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

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

如果您正在做任何远程复杂的事情，我建议您这样做。

Answer 3

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

Answer 4

由于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

Answer 5

Here你可以找到一个如何格式化Y轴值的好例子。

此外，您可以使用您提到的scaleLabel : "<%=value%>"，这基本上意味着<%=和%>代码之间的所有内容都将被视为javascript代码（即您可以使用{{1} } statments ...）

Answer 6

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

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

Answer 7

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

Chart.js - 格式化Y轴

7 个答案: