Chartjs 2.0 - x轴的提升高度标签

JSBin这里：http://jsbin.com/xukuhanota/1/edit?output Chartjs 2.0 - x轴的提升高度标签

我试图增加高度（或基本上，顶部/底部填充）标签（蜱？）沿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属性，但我不知道是否/如何它们适用于蜱VS尺度。

来源

2016-06-10 elzi

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

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

看起来你需要提供自己的规模实现，如果你想更好地控制......在我链接的版本中，填充主要在calculateTickRotation和fit方法中计算。所以改变填充可能就像给an afterFit callback添加刻度选项一样简单，只需更改paddingTop和paddingBottom即可。我没有尝试。否则，create a subclass of Scale并提供afterFit方法。

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

来源

2016-06-10 20:35:28 Djizeus

感谢。如果您看到它的计算线路，我很乐意编辑源代码...即使遇到这种情况也很麻烦。 – elzi

再次查看后可能比我想象的更容易，请检查我的更新答案。 – Djizeus

我迷上了xAxes的'afterFit'回调函数，并将scale实例看作参数。例如，我可以编辑'scale.paddingTop = 10'，但似乎没有任何改变。我是否要返回一个值？这是一个更新的JSBin：http://jsbin.com/neyiyuviku/1/edit – elzi

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

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

来源

2017-03-31 06:49:24 Pascal

Chartjs 2.0 - x轴的提升高度标签

回答

相关问题