Javascript Charts.js使用货币和千位分隔符格式化Y轴

我正在使用Charts.js在我的网站上显示一个图表。目前，标签显示为一长串数字（即123456）。 我希望它显示为带有数千分隔符的货币：（即123456美元）

我正在使用scaleLabel选项将$USD符号置于值之前：

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

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

这是小提琴：

（请记住，当前只有删除上面提到的两个JavaScript片段中的一个，图形才会工作）

---

感谢您提供的所有帮助。

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

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

---

我是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的答案同样值得称赞。

除了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;
        }
    }
}

滴答声：{
回调：函数（值、索引、值）{
如果（parseInt（值）>999）{
返回“$”+value.toString（）。替换（/\B（？=（\d{3}）+（？！\d））/g，“，”；
}else if（parseInt（值）<-999）{
返回'-$'+Math.abs（value.toString（）.replace（/\B（？=（\d{3}）+（？！\d））/g，“，”；
}否则{
返回“$”+值；
}
}
}

---

显示负数货币的正确格式是-$XXX，因此我们在值前面加上

-$

，然后运行Math.abs（），将其转换为正数。

我主要是总结其他人提到的内容，但我认为这是最干净的解决方案（也是经常遇到的）问题是如何使用美元货币格式：

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

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"});
           }
         }
       }]
     }
   }
 });

这适用于所有现代浏览器。列出了其他地区、货币和格式类型（例如百分比）的特定浏览器兼容性和选项

Note Chart.js版本2+（2016年4月发布）用于高级勾号格式：

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

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"});
           }
         }
       }]
     }
   }
 });

如果您使用的是以下语法：

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和mfink在chartjs v2.0中使用

toLocaleString

，您可以设置如下全局选项：

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();
        }
    }
});

---

如果对Angular 2+（ng2图表）使用Charts.js，则可以使用

CurrencyPipe

。下面是我如何格式化标签的：

在page.ts文件中插入依赖项：

import { CurrencyPipe } from '@angular/common';

以下是我在图表选项中的名称：

public chartOptions: any = {
        responsive: true,
        legend: {
            display: false,
            labels: {
                display: false
            }
        },
        tooltips: {
          enabled: true,
          mode: 'single',
          callbacks: {
            label: function(tooltipItem, data) {
              let label = data.labels[tooltipItem.index];
              let datasetLabel = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
              let currencyPipe = new CurrencyPipe('en');
              let formattedNumber = currencyPipe.transform(datasetLabel, 'USD', 'symbol');
              return label + ': ' + formattedNumber;
            }
          }
        }
    };

---

使用ChartJSV2.8.0，在查看文档后，我找到了它

我没有制作自己的格式化程序，而是用它来格式化数字。 我就是这么做的：

从“数字”导入数字

options: {
  scales: {
    yAxes: [{
      ticks: {
        callback: function (value, index, values) {
          // add comma as thousand separator
          return numeral(value).format('0,0')
        },
      }
    }]
  },
  tooltips: {
    callbacks: {
      label: function (tooltipItem, data) {
        var label = data.datasets[tooltipItem.datasetIndex].label || ''

        if (label) {
          label += ': '
        }
        label += numeral(tooltipItem.yLabel).format('0,0')
        return label
      },
    },
  },
}

---

您可以使用

格式（“$0,0”）

添加货币符号和逗号千位分隔符。

有一个特定的javascript函数，可以将长数字转换为根据系统设置格式化的数字：toLocaleString（）

您可以通过在勾选选项中添加“callback:”关键字，指定每个勾选（或由其编号索引标识的特定勾选）的标签必须由您自己的函数生成：

之前：

        ticks: {
                  max: maxAltitude,
                  min: 0
                }

之后：

        ticks: {
                  max: maxAltitude,
                  min: 0, // <--- dont' foget to add this comma if you already have specified ticks options
                    callback:  
                      function(value, index, valuesArray) {
                          // value: currently processed tick label
                          // index of currently processed tick label
                          // valuesArray: array containing all predefined labels
                          return  value.toLocaleString(); 
                      } // Function end
                } // Ticks options end

---

我知道我的答案太晚了，但由于op的原因，我们正在得到更多的关注，这可能与现在有关

以下是更简单、更体面的方法

const formatter = new Intl.NumberFormat("en-US", {
    style: "currency",
    currency: "USD"
}); // Change locale according to your currency and country

var options = {
    scales: {
        yAxes: [
            {
                ticks: {
                    callback: (label, index, labels) => {
                        return formatter.format(label);
                    }
                }
            }
        ]
    }
}

---

谢谢你，成功了！如果网站允许，我将在7分钟内接受你的答案：-）这只适用于1.x的Chart.js，如果你需要2.x或更高版本的答案，请向下滚动。这不适用于包含多个值的“复杂”scaleLabel，你需要{something1:something1，something2:something2，回调：函数（标签）等}哇，这个问题被浏览了近4000次！请-如果这个问题对你有用，一定要投赞成票！回答-这是图表v2的解决方案。上列出的其他解决方案似乎不适用于最新版本。工作起来很有魅力！谢谢我们也可以使用

tolocalString

而不是所有的正则表达式和条件，只需简单地：

return“$”+parseInt（value.tolocalString（）感谢您放置完整选项对象。当你是一个寻找类似答案的局外人时，你不知道所有这些选项都嵌套在哪里，我们可以避免浪费时间。此外，它绝对正确并且有效：p.为什么你认为这对工具提示不起作用？尝试将其放入我的工具提示回调中，对于那些希望从货币中删除小数点的人来说，这是无效的：
{style:“currency”，currency:“USD”，minimumFractionDigits:0，maximumFractionDigits:0}
如果符号可以更改怎么办？你如何传递它，以及号码的位置（前/后）？