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

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

Answer 1

文档说“Scale实例具有以下属性”。对我来说，这听起来不像是你可以提供的一些设置，而是你可以实现自己的规模设置。

我简要介绍了code for their scale implementation，看起来你没有太多直接控制填充属性的计算，除了一个未记录的设置padding（参见链接版本中的第40行）。我尝试在你的jsbin中应用它（只需在padding对象中添加一个ticks属性）：它确实对Y轴有影响，但不影响X轴。

如果您想要更好的控制，看起来您需要提供自己的缩放实现...在我链接的版本中，填充主要使用calculateTickRotation和fit方法计算。因此，更改填充可能就像为缩放选项提供an afterFit callback一样简单，只需更改paddingTop和paddingBottom即可。我没试过。否则，create a subclass of Scale并提供afterFit方法。

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

Answer 2

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

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

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

2 个答案: