chart.js - 图表 : How to create padding between ticks and scale label

Question

我正在使用 chartjs-node 创建图形，并使用 Y 轴的标签。

我的问题是 Y 轴刻度和标签之间的距离很小，看起来不太好。我已经浏览了文档，但找不到任何对这种情况有用的东西... 下有一个选项选项 -> 比例 -> yAxes -> 刻度 -> 填充 但它没有给出预期的效果。

目前我在 下有一个解决方法选项 -> 比例 -> yAxes -> 刻度 -> 回调 我手动插入空格:callback: (val) => ` ${val}%`
这有效，但显然不是正确的用法，我相信如果比例是线性的，这种方法将禁止我使用线性比例可用的一些功能。

任何人都知道我如何以更优雅的方式在刻度和标签之间创建分隔？

Answer 1

这可以使用 来实现afterFit y轴回调函数:

scales: {
   yAxes: [{
      afterFit: function(scale) {
         scale.width = 80 //<-- set value as you wish 
      },
      ...
   }]
}

ɪɴ ᴀᴄᴛɪᴏɴ

var chart = new Chart(ctx, {
   type: 'line',
   data: {
      labels: ['Jan', 'Feb', 'Mar'],
      datasets: [{
         label: 'LINE',
         data: [3, 2, 4],
         backgroundColor: 'rgba(0, 119, 290, 0.2)',
         borderColor: 'rgba(0, 119, 290, 0.6)'
      }]
   },
   options: {
      responsive: false,
      scales: {
         yAxes: [{
            afterFit: function(scale) {
               scale.width = 80  //<-- set value as you wish 
            },
            scaleLabel: {
               display: true,
               labelString: 'y-axis label',
            }
         }]
      }
   }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas id="ctx" height="180"></canvas>