Charts.js使用Currency和ThousandsSeparator格式化Y轴

我正在使用Charts.js在我的网站上显示图表.目前,标签显示为一长串数字(即123456).我希望它以千位分隔符显示为货币:(即$ 123,456)

我正在使用scaleLabel选项在值之前放置$ USD符号:

scaleLabel: "<%= ' $' + Number(value)%>"

以及插入逗号分隔符的函数:

function(label){return label.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");}

我只是不知道如何一起使用这些来得到我想要的东西.

这是小提琴:http://jsfiddle.net/vy0yhd6m/79/

(请记住,目前只有删除上面引用的两个Javascript中的一个时,图表才有效)

感谢您的帮助.

1> Perry Tew..：

---

我是chart.js的新手,但是我必须做的就是让Billy Moon的答案与最新版本2.1.6一起使用.

  var data = {
    labels: ["12 AM", "1 AM", "2 AM", "3 AM", "4 AM", "5 AM", "6 AM", "7 AM", "8 AM", "9 AM", "10 AM", "11 AM", "12 PM", "1 PM", "2 PM", "3 PM", "4 PM", "5 PM", "6 PM", "7 PM", "8 PM", "9 PM", "10 PM", "11 PM"],
    datasets: [
      {
        label: "Sales $",
        lineTension: 0,
        backgroundColor: "rgba(143,199,232,0.2)",
        borderColor: "rgba(108,108,108,1)",
        borderWidth: 1,
        pointBackgroundColor: "#535353",
        data: [65, 59, 80, 81, 56, 55, 59, 80, 81, 56, 55, 40, 59, 80, 81, 56, 55, 40, 59, 80, 81, 56, 55, 40]
      }
    ]
  };

  //var myChart =
  new Chart(document.getElementById('sales-summary-today'), {
    type: 'line',
    data: data,
    options: {
      animation: false,
      legend: {display: false},
      maintainAspectRatio: false,
      responsive: true,
      responsiveAnimationDuration: 0,
      scales: {
        yAxes: [{
          ticks: {
            beginAtZero: true,
            callback: function(value, index, values) {
              if(parseInt(value) >= 1000){
                return '$' + value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
              } else {
                return '$' + value;
              }
            }
          }
        }]
      }
    }
  });

再次,归功于Billy Moon对标签格式化功能的回答.

---

谢谢!我们也可以使用`toLocaleString`而不是所有的正则表达式和条件,只是简单地说:`return"$"+ parseInt(value).toLocaleString();`

---

这是图表v2的解决方案.http://stackoverflow.com/questions/2037186​​7/chart-js-formatting-y-axis/28700578#28700578中列出的其他解决方案似乎不适用于最新版本

---

感谢您提供完整选项对象.当你是一个寻找类似答案的局外人时,你不知道所有这些选项都嵌套在哪里,我们避免浪费时间.此外,它绝对正确和有效:p.

---

同意,这应该是公认的答案.

2> Billy Moon..：

---

您应该能够在函数内部的标签组成中包含货币前缀...

var optiOns= {
    animation: false,
    scaleLabel:
    function(label){return  '$' + label.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");}
};

http://jsfiddle.net/vy0yhd6m/80/

---

仅适用于Chart.js 1.x，如果需要2.x或更高版本的答案，请向下滚动。

3> 小智..：

---

我主要总结其他人提到的内容,但我认为对这个确切(并且经常遇到)问题的最干净的解决方案是使用带有美元货币格式的toLocaleString方法:

return value.toLocaleString("en-US",{style:"currency", currency:"USD"});

这适用于所有现代浏览器.在Mozilla的文档toLocaleString列出了具体的浏览器的兼容性和其他语言环境,货币和格式类型(例如百分比)的选项.

注意Chart.js版本2+(2016年4月发布)要求使用该callback方法进行高级刻度格式化:

var chartInstance = new Chart(ctx, {
  type: 'line',
  data: data,
  options: {
     scales: {
       yAxes: [{
         ticks: {
           callback: function(value, index, values) {
             return value.toLocaleString("en-US",{style:"currency", currency:"USD"});
           }
         }
       }]
     }
   }
 });

如果您使用Chart.js版本1.X的语法将是:

var myLineChart = new Chart(ctx).Line(data, options);
var data = {
  ...
}
var optiOns= {
  scaleLabel: function(label) {
    return value.toLocaleString("en-US",{style:"currency", currency:"USD"});
}

感谢Perry Tew 引用语法更改,以及想要使用的想法toLocaleString.

---

对于那些想从货币中删除小数点的人：`{style：“ currency”，currency：“ USD”，minimumFractionDigits：0，maximumFractionDigits：0}`

4> Ege Ersoz..：

---

添加Perry Tew的答案,如果您的轴上有负的美元金额(例如,当显示盈亏图表时),您可以使用:

ticks: {
    callback: function(value, index, values) {
        if(parseInt(value) > 999){
            return '$' + value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
        } else if (parseInt(value) <-999) {
            return '-$' + Math.abs(value).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
        } else {
            return '$' + value;
        }
    }
}

显示负货币的正确格式是 - $ XXX,因此我们预先-$添加该值,然后通过Math.abs()运行它,将其转换为正数.

5> 小智..：

---

在chartjs v2.0中，您可以像这样设置全局选项：

Chart.defaults.global.tooltips.callbacks.label = function(tooltipItem, data) {
    return tooltipItem.yLabel.toLocaleString("en-US");
};

Chart.scaleService.updateScaleDefaults('linear', {
    ticks: {
        callback: function (value, index, values) {
            return value.toLocaleString();
        }
    }
});