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属性，但我不知道它们如何应用于刻度和比例尺。

- elzi

Answer 1

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

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

- Pascal

---

刻度：{ xAxes: [{ display:false, afterFit: (scale) => { scale.height = 40; } }] }, - Doflamingo19

Answer 2

文档中说“比例实例具有以下属性”。对我来说，这听起来不像是你可以设置的某个设置，而是你可以期望的一些设置，如果你自己实现比例。

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

看起来如果你想要更好的控制，需要自己提供比例尺实现... 在我提供的版本中，填充大部分是在 calculateTickRotation 和 fit 方法中计算的。因此，改变填充可能很容易，只需在比例尺选项中提供一个 afterFit回调函数，其中简单地更改 paddingTop 和 paddingBottom 即可。我没有尝试过。否则，创建一个 Scale 的子类 并提供一个 afterFit 方法。

我不是 chart.js 专家，所以不要把这个作为完整和决定性的答案，但我希望这能够给你提供一个有用的方向。

- Djizeus

---

谢谢。如果您能找到计算该行的代码，我可以轻松地编辑源代码...但是我甚至都找不到那一行。 - elzi

第二次看起来可能比我想象的要容易，可以查看我的更新答案。 - Djizeus

我已经钩入了xAxes上的afterFit回调，并将比例实例作为参数进行查看。然后，我可以编辑scale.paddingTop = 10，例如，但似乎没有任何变化。我需要返回一个值吗？这是更新后的JSBin：http://jsbin.com/neyiyuviku/1/edit - elzi

这是分类刻度，我猜我可以对它进行修改？ - elzi