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

Question

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

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

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

和插入逗号分隔符的函数：

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

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

这里是fiddle：http://jsfiddle.net/vy0yhd6m/79/

（请记住，目前该图只有在您删除上面引用的 JavaScript 的两个部分之一时才有效）

感谢您的所有帮助。

Answer 1

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

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

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

Answer 2

我是 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 对标签格式化功能的回答。

Answer 3

添加到 Perry Tew 的回答中，如果您的轴上有负的美元金额（例如，当显示 profit/loss 图表时），您可以使用此：

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()，将它转换成阳性。

Answer 4

我主要是在总结其他人提到的内容，但我认为解决这个确切（且经常遇到）问题的最干净的解决方案是使用 the toLocaleString method 和美元货币格式：

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

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

注意 Chart.js 版本 2+（2016 年 4 月发布）requires using the callback method 用于高级刻度格式：

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 Version 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 , and to mfink for 使用 toLocaleString。

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

Answer 6

如果您对 Angular 2+ (ng2-charts) 使用 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;
            }
          }
        }
    };

更新 2022-04-07： Chart.js 版本 3 的语法已更改。如果您使用的是 v3，则选项对象如下所示：

import { ChartConfiguration, ChartData, ChartType } from 'chart.js';
import { CurrencyPipe } from '@angular/common';

public chart_options: ChartConfiguration['options'] = {
   layout: {
      padding: 25,
   },
   responsive: true,
   plugins: {
      legend: {
         display: false,
      },
      tooltip: {
         enabled: true,
         callbacks: {
            label: function(context) {
               let currency_pipe = new CurrencyPipe('en');
               return ' ' + context.label + ': ' + currency_pipe.transform(context.parsed, 'USD', 'symbol');
            }
         }
      }
   }
};

public chart_type: ChartType = 'doughnut';
public chart_labels: string[] = [];
public chart_data: ChartData<'doughnut'> = {
   labels: this.chart_labels,
   datasets: [{
      data: [],
      backgroundColor: [],
   }]
};

<div style="display: block;">
   <canvas baseChart [data]="chart_data" [options]="chart_options" [type]="chart_type"></canvas>
</div>

Check out the Chart.js v3 Migration Guide for more info

Answer 7

使用 chartjs v2.8.0，在查看文档后，我找到了 here。

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

import numeral from 'numeral'

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
      },
    },
  },
}

您可以使用 format('$ 0,0') 添加货币符号和逗号千位分隔符。

Answer 8

有一个特定的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

没有注释也没有未使用的变量：

        ticks: {
                  max: maxAltitude,
                  min: 0, 
                  callback:  
                      function(value) {
                        return  value.toLocaleString(); 
                      }
                }

Answer 9

我知道我的回答为时已晚，但由于 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);
                    }
                }
            }
        ]
    }
}

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

Charts.js Formatting Y Axis with both Currency and Thousands Separator

javascript

function

chart.js