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。不要问我为什么，但.5对于让笔画实际上是1px宽和纯黑色非常重要。否则，它似乎在50％不透明度下变为2px宽。您必须自己计算与线图有关的确切位置。

您还可以通过将r更改为paper来使用path中的playground功能进行游戏。

如果您正在寻找定义轴的确切范围（而不仅仅是输入的最小值和最大值），您可能还会考虑查看Google Chart Tools。

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

2 个答案: