Flot 绘制附加垂直网格线答案

【问题标题】：Flot draw additional vertical grid lineFlot 绘制附加垂直网格线
【发布时间】：2013-05-28 00:11:11
【问题描述】：

我无法摆脱图表末尾的垂直线。

网格线颜色为darkred，仅在这部分js代码中设置：

grid: {
    aboveData: false,
    hoverable: true,
    clickable: true,
    color: "darkred",
    borderWidth: {
        top: 0,
        bottom: 1,
        left: 0,
        right: 0
    }
}

控制台不会抛出任何错误。我不使用来自 javascript 文件或外部 css 文件的任何边距。

【问题讨论】：

标签： flot

【解决方案1】：

我认为这可能是一个错误。

问题不在于您的网格设置，而在于每个轴的绘图。具体来说，您设置了 2 个 y 轴，一个在左侧，一个在右侧。在 flot 代码的深处，它根据轴是否“最里面”来决定是否绘制一个“条”来附加刻度。当您有 2 个 yaxes 时，它会错误地确定您的右侧 yaxis 是 not 最里面的，因此会绘制一个刻度条。

相关代码，两个位都被称为per-axis：

在allocateAxisBoxFirstPhase:

/*note this is only called for axes that have tickLength set
  but later it is checked as true/false, not undefined 
  (which is what you'd get if you set your yaxis tickLength = 0) */
var sameDirection = $.grep(all, function (a) {
  return a && a.reserveSpace;
});

innermost = $.inArray(axis, sameDirection) == 0;

在drawGrid:

if (!axis.innermost) {

   //in here it draws the tick bar

}

解决方法：

找到!axis.innermost 位并将其更改为axis.innermost == false。在第二个 yaxis 中设置 tickLength = 0。就是这样。

我在这里实现了这两个更改：http://jsfiddle.net/63BPw/5/

另外，仅供参考，我为此提交了一个错误：https://github.com/flot/flot/issues/1056

【讨论】：

而且这个bug已经修复了，比我建议的要好:)
非常感谢您的帮助并将此问题推送到 github。我现在就下载修正版的flot！