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

Question

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

以下是Flotr2多轴图：

​

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

为了便于阅读，我需要在Axis标签和标题之间提供一些空间。

我正在添加这个多轴Flotr2图Url：http://www.humblesoftware.com/flotr2/#!advanced-titles的引用

有人能帮我吗。

Answer 1

这是一个bug，可以在这里看到：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)对我来说就足够了。

后来我发现，IMHO，ist是内部getBestTextAlign成员函数中的一个bug。当我删除两个模糊的角度相关的对齐调整时，一切都很好：

  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;
  },

我不知道这个代码背后的想法是什么。这一点也没有评论。对不起，没有好的编码练习。