raphael - 有没有办法将网格线添加到 gRaphael 折线图？

Question

我有一个用 gRaphael 创建的折线图。它有轴和刻度线，但我想要网格线。是否有内置的方法来实现这一点或可以帮助我的附加库？

Answer 1

gRaphael 没有添加网格线的内置方法，但绘制它们非常容易，可以通过编辑源代码或在创建图形对象后操作它。

我找到了一个名为 RaphAlytics 的扩展名并使用了它的 drawGrid()在我需要带网格的边界框的情况下发挥作用。

您可以根据需要为任何 gRaphael 图形调整此函数以绘制网格线。在折线图上，我需要绘制与折线图上的左轴标记对齐的水平网格线，因此我使用该函数作为示例，如下所示:

// Draw horizontal gridlines
for (var i = 0; i < g.axis[1].text.items.length; i++) {
    r.path(['M', x, g.axis[1].text.items[i].attrs.y, 'H', w + x]).attr({
        stroke : '#EEE'
    }).toBack();
}

这是一个工作 fiddle 来说明该示例: http://jsfiddle.net/KM3BB/1/