javascript - 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 轴标签正确适合 View ...

layout: {
   padding: {
      left: 10
   }
}

ᴡᴏʀᴋɪɴɢ ᴇxᴀᴍᴘʟᴇ⧩

var ctx = document.getElementById('c').getContext('2d');
var myChart = new Chart(ctx, {
   type: 'bar',
   data: {
      labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
      datasets: [{
         label: 'Profit',
         data: [666666, 777777, 888888, 999999, 1100000],
         backgroundColor: ['#30799f', '#ac51c3', '#4ba57b', '#e3297d', '#e35c32'],
         borderColor: ['#30799f', '#ac51c3', '#4ba57b', '#e3297d', '#e35c32'],
         borderWidth: 1
      }]
   },
   options: {
      legend: { display: false },
      responsive: false,
      layout: {
         padding: {
            left: 10 //set as you wish
         }
      },
      scales: {
         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);
               }
            }
         }]
      }
   }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas id="c" width="350" height="200"></canvas>