Chart.js - 格式化 Y 轴

Posted 2023-02-16

【中文标题】Chart.js - 格式化 Y 轴

【英文标题】：Chart.js - Formatting Y axis

【发布时间】：2013-12-20 17:35:30

【问题描述】：

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

123456.05 至 123 456,05 美元

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

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

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

【问题讨论】：

OP：请重新考虑选择的答案

【参考方案1】：

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

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

【参考方案2】：

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

【讨论】：

非常清楚，我很困惑如何使用带有自定义值的 scaleLabel 谢谢+1

【参考方案3】：

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

【讨论】：

为什么它对我不起作用。请帮我。 ***.com/questions/39256476/…

【参考方案4】：

ChartJS 库的一个未记录的特性是，如果您传入一个函数而不是字符串，它将使用您的函数来呈现 y 轴的 scaleLabel。

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

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

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

【讨论】：

这实际上是最好的答案。由于一个简单的 IF 函数被直接调用，而不是运行嵌入式模板解析器，后者间接调用 JS 代码。

【参考方案5】：

我遇到了同样的问题，我认为在 Chart.js 2.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'
                
            
        ]
    

【讨论】：

很高兴听到这个消息。

这似乎也是使用 angular-chart.js 的正确方法

这个答案必须被接受。我认为这可能适用于 2.x.x 及更高版本的新版本。我有一个新版本，我尝试了在网络上找到的许多其他解决方案，但没有任何效果。这是唯一对我有用的东西..

这很好用。这应该被接受为答案。我花了一个小时才找到这个。为什么这不在文档中，这超出了我的范围。你是怎么找到这个的，杰森？

感谢您的回答，对我的项目帮助很大。

【参考方案6】：

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

【讨论】：

工作就像魅力！太棒了！

【参考方案7】：

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

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