Chartjs 2.0-增加x轴标签的高度

Question

JSBin此处：http://jsbin.com/xukuhanota/1/edit?output

我试图沿着x轴增加标签(记号？)的高度(或者基本上是顶部/底部填充)。

以下是图表的相关代码：

xAxes: [{
id: 'x-axis-0',
type: 'category',
gridLines: {
display: false,
},
ticks: {
fontSize: 16,
maxRotation: 0,
fontFamily: "opensans",
fontStyle: "bold",
paddingTop: 10,         // doesnt work 
paddingBottom: 10,      // doesnt work 
},

paddingTop: 10,           // doesnt work 
paddingBottom: 10,        // doesnt work 

根据文档，有paddingBottom和paddingTop属性，但我不知道它们是否/如何应用于刻度与刻度。

Answer 1

为了完整起见，提供一个像这样的选项对象，您的轴将有一个固定的高度，或者更改一些填充值

var options = {
scales: {
xAxes: [{
afterFit: (scale) => {
scale.height = 120;
}
}]
}
};

Answer 2

文档中说"Scale实例具有以下属性"。对我来说，这听起来并不是你可以给出的一些设置，而是如果你实现自己的规模，你可以期待的一些设置。

我简要地看了一下它们的scale实现的代码，看起来你对填充属性的计算没有太多的直接控制，除了一个没有文档记录的设置padding(请参阅链接版本中的第40行)。我试着在您的jsbin中应用它(只需向ticks对象添加一个padding属性)：它确实对Y轴有影响，但对X轴没有影响。

如果你想更好地控制，你似乎需要提供自己的规模实施。。。在我链接的版本中，填充主要是用calculateTickRotation和fit方法计算的。因此，更改填充可能就像对缩放选项进行afterFit回调一样简单，只需更改paddingTop和paddingBottom即可。我还没试过。否则，创建Scale的子类并提供afterFit方法。

我不是chart.js专家，所以不要把它当作一个完整而明确的答案，但我希望这能给我一个有用的方向。