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 实例具有以下属性”。对我来说，这听起来不像是您可以提供的某些设置，而是如果您实现自己的比例，您可以期望的一些设置。

我简要查看了其缩放实现的代码，看起来您对填充属性的计算没有太多直接控制，除了一个padding未记录的设置（请参阅链接版本中的第 40 行）。我尝试将它应用到你的 jsbin 中（只需padding向对象添加一个属性ticks）：它确实对 Y 轴有影响，但对 X 轴没有影响。

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

我不是 Chart.js 专家，所以不要将此视为完整且明确的答案，但我希望这给出了有用的方向。