y轴格式，带公制前缀1000 => 1k Chart.js

Question

我正在使用Chart.js生成显示货币价值的条形图。默认情况下，y轴标签使用度量标准前缀作为缩写，例如，显示1k代替1000，显示1M代替1000000。

我已经尝试过此代码，但是它仅显示货币符号，但我的数字仍然像1000000格式！

这是我尝试过的代码。

 yAxes: [{

              ticks: {
                 display: true,
                 beginAtZero: false,
                callback: function (value, index, values) {
                            if (parseInt(value) >= 1000) {
                           return '$' + value  ;
                           } else {
                        return value;
                         }
                         }
                       },
                          gridLines: {
                               show: true,

                             }
                       }],

谢谢

Answer 1

您可以使用以下y轴刻度回调函数来完成此操作...

yAxes: [{
   ticks: {
      stepSize: 100000,
      callback: function(value) {
         var ranges = [
            { divider: 1e6, suffix: 'M' },
            { divider: 1e3, suffix: 'k' }
         ];
         function formatNumber(n) {
            for (var i = 0; i < ranges.length; i++) {
               if (n >= ranges[i].divider) {
                  return (n / ranges[i].divider).toString() + ranges[i].suffix;
               }
            }
            return n;
         }
         return '$' + formatNumber(value);
      }
   }
}]

您还需要在图表的左侧添加一些填充，以便y轴标签适合视图...

layout: {
   padding: {
      left: 10
   }
}

??????? ？X？？？？？？

yAxes: [{
   ticks: {
      stepSize: 100000,
      callback: function(value) {
         var ranges = [
            { divider: 1e6, suffix: 'M' },
            { divider: 1e3, suffix: 'k' }
         ];
         function formatNumber(n) {
            for (var i = 0; i < ranges.length; i++) {
               if (n >= ranges[i].divider) {
                  return (n / ranges[i].divider).toString() + ranges[i].suffix;
               }
            }
            return n;
         }
         return '$' + formatNumber(value);
      }
   }
}]

layout: {
   padding: {
      left: 10
   }
}