4

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属性，但我不知道它们是否/如何应用于刻度与刻度。

4

2 回答 2

5

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

var options = {
    scales: {
        xAxes: [{
            afterFit: (scale) => {
                scale.height = 120;
            }
        }]
    }
};
于 2017-03-31T06:49:24.240 回答
1

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

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

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

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

于 2016-06-10T20:35:28.530 回答