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();
}

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

Answer 2

我昨天试过这样做。简短回答：gRaphaël 无法使用任何折线图选项或轴选项为您执行此操作，您必须自己使用 Raphaël。
就像是：

var r = Raphael("holder"), txtattr = { font: "12px sans-serif" };
r.path('M 15 200.5 L 310 200.5 M 15 180.5 L 310 200.5');
r.linechart(10, 10, 300, 220, x, [y, y2, y3]);

这意味着在我的折线图下绘制一条从 15,200.5 开始并画一条直线到 310,200.5 移动到 15,180.5 并画一条线到 310,180.5 的路径。不要问我为什么，但是 0.5 对于让笔画实际上是 1px 宽和纯黑色很重要。否则，它似乎在 50% 的不透明度下别名为 2px 宽。您必须自己计算关于折线图的确切位置。

您还可以通过更改为来使用Playground中的路径功能。rpaper

如果您正在寻找诸如定义轴的确切范围（而不仅仅是输入的最小值和最大值）之类的东西，您也可以考虑查看Google Chart Tools 。