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

Question

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

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

目前，我在选项 -> 刻度 ->yAxes -> 刻度 -> 回调下有一个解决方法，我手动插入空格：callback: (val) => ` ${val}%`

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

有谁知道我如何以更优雅的方式在刻度和标签之间创建分离？

Answer 1

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

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>