有没有办法将网格线添加到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();
}

这是一个工作小提琴来说明这个例子:http://jsfiddle.net/KM3BB/1/