Chartjs：如何在刻度和刻度标签之间创建填充

Question

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

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

目前我在options -> scales -> yAxes -> ticks -> callback下有一个解决方法我手动插入空格： callback: (val) => ` ${val}%`

这有效，但显然不是正确的用法，我相信如果比例是线性的，这种方法将禁止我使用线性比例可用的一些功能。

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

Answer 1

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

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

?? ？？？？？？

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',
            }
         }]
      }
   }
});