gRaphaël - 带有标签和日期的条形图示例

Question

我有兴趣使用gRaphaël图表库来渲染SVG图表。

特别是我想渲染一个沿x轴有日期的条形图。是否有任何文档和/或示例可以解释：

1. 使用日期作为条形图的x轴
2. 向条形图的x轴添加标签

示例here不包含x轴标签或日期。文档here未提及x轴标签。查看源代码here我找到了一个label(labels, isBottom)函数可能有所帮助，但我找不到任何文档或如何使用它的示例。

Answer 1

要在条形图的x轴上添加标签，可以编写如下函数：

function barchartAxis (x, y, width, barwidth, gutter, labels, orientation, type, dashsize, paper) {

dashsize = dashsize == null ? 2 : dashsize;
type = type || "t";
paper = arguments[arguments.length-1];

var path = type == "|" || type == " " ? ["M", x + .5, y, "l", 0, .001] : orientation == 1 || orientation == 3 ? ["M", x + .5, y, "l", 0, -length] : ["M", x, y + .5, "l", length, 0],
    j = 0,
    txtattr = { font: "11px 'Fontin Sans', Fontin-Sans, sans-serif" },
    text = paper.set();

if (+orientation == 1 || +orientation == 3) {
    // y-axis    
} else {
    addon = (orientation ? -1 : 1) * (dashsize + 9 + !orientation);

    var halfBarwidth = barwidth/2,
        dx = barwidth + gutter,
        X = x + halfBarwidth,
        txt = 0;

    while (X <= x + width - halfBarwidth) {
        type != '-' &&
            type != ' ' &&
                (path = path.concat(
                    ['M', X + .5, y - (type == '+' ? dashsize : !!orientation * dashsize * 2), 'l', 0, dashsize * 2 + 1]
                ));

        text.push(txt = paper.text(X, y + addon, (labels && labels[j++])).attr(txtattr));
        X += dx;
    }
}

var res = paper.path(path);
//...
return res;

}

与线图的轴线相同。