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

gRaphaël - Bar chart examples with labels and dates

本文关键字：日期 条形图 标签 #235 gRapha      更新时间：2023-12-21

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

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

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

这里的示例不包括x轴标签或日期。这里的文档没有提到x轴标签。查看这里的源代码，我发现了一个label(labels, isBottom)函数，它可能会有所帮助，但我找不到任何关于如何使用它的文档或示例

要在条形图的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;

}

与折线图的轴逻辑相同。

相关文章：