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ᴀᴍᴘʟᴇᴀᴍᴘʟᴇ

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>

y轴使用度量标准前缀格式1000 =＆gt; 1k Chart.js

1 个答案: