javascript - 如何在 Flotr2 多轴图表中的 Y-2 轴上提供 Y-2 轴标签和标题之间的空间

Question

我正在使用 Flotr2 创建多轴图表..

这是 Flotr2 多轴图表图像：

在右侧的这个多轴图表中，轴标签和标题是重叠的..

我需要如何在轴标签和标题之间提供一些空间以便于阅读。

我正在添加这个多轴 Flotr2 图表网址的参考：http ://www.humblesoftware.com/flotr2/#!advanced-titles

任何人都可以帮助我吗？

Answer 1

这是一个错误，可以在这里看到： https ://github.com/HumbleSoftware/Flotr2/issues/151

对我来说，一个很好的解决方法是在页面 html 中放入一个带有轴标题的图像，位于图表的右上角。

Answer 2

您可以尝试更改网格对象中的 labelMargin。

  grid : {
    verticalLines : false,
    backgroundColor : 'white',
    labelMargin: 20
  },

似乎有点帮助，但它会影响所有标签。

Answer 3

好吧，暂时忍受这个错误。在刻度标签（数字）中添加空格可以为轴标签腾出空间。

function addSpace(v,axis) {
 return Flotr.defaultTickFormatter(v,axis)+"   ";
}

...

y2axis: title:"Leistung (W)", tickFormatter:addSpace,

三个空格（0x20）对我来说就足够了。

后来我发现，恕我直言，ist是内部getBestTextAlign成员函数中的一个错误。当我删除两个模糊的与角度相关的对齐调整时，一切正常：

  getBestTextAlign: function(angle, style) {
    style = style || {textAlign: 'center', textBaseline: 'middle'};
    angle += Flotr.getTextAngleFromAlign(style);

//    if (Math.abs(Math.cos(angle)) > 10e-3) 
//      style.textAlign    = (Math.cos(angle) > 0 ? 'right' : 'left');

//    if (Math.abs(Math.sin(angle)) > 10e-3) 
//      style.textBaseline = (Math.sin(angle) > 0 ? 'top' : 'bottom');

    return style;
  },

我不知道这段代码背后的想法是什么。它根本没有评论。抱歉，没有好的编码习惯。