如何在 Raphael js 图表上添加 X 轴和 Y 轴标签

Question

我正在尝试使用 Raphael.js 为数据绘制一些漂亮的图形，之后我意识到我正在尝试解决的 js 存在一些限制。

有谁知道如何动态缩放 y 轴值，因为我已经意识到，一旦值超过 >500 ，图形就根本不会出现，只有轴出现在一条线上的最边缘（即超过限制）。

其次，有没有办法在图表中添加图例或轴标签？还是必须将图形标签单独编码为 html ？

非常感谢！！！它是一个很好看的工具，但它似乎毫无用处......

Answer 1

图表 g.bar.js 没有绘制轴的选项。但是，如果您查看 g.line.js，则在第 98-117 行（当前）周围有一段代码用于绘制轴：

    var allx = Array.prototype.concat.apply([], valuesx),
        ally = Array.prototype.concat.apply([], valuesy),
        xdim = chartinst.snapEnds(Math.min.apply(Math, allx), Math.max.apply(Math, allx), valuesx[0].length - 1),
        minx = xdim.from,
        maxx = xdim.to,
        ydim = chartinst.snapEnds(Math.min.apply(Math, ally), Math.max.apply(Math, ally), valuesy[0].length - 1),
        miny = ydim.from,
        maxy = ydim.to,
        kx = (width - gutter * 2) / ((maxx - minx) || 1),
        ky = (height - gutter * 2) / ((maxy - miny) || 1);

    var axis = paper.set();

    if (opts.axis) {
        var ax = (opts.axis + "").split(/[,\s]+/);
        +ax[0] && axis.push(chartinst.axis(x + gutter, y + gutter, width - 2 * gutter, minx, maxx, opts.axisxstep || Math.floor((width - 2 * gutter) / 20), 2, paper));
        +ax[1] && axis.push(chartinst.axis(x + width - gutter, y + height - gutter, height - 2 * gutter, miny, maxy, opts.axisystep || Math.floor((height - 2 * gutter) / 20), 3, paper));
        +ax[2] && axis.push(chartinst.axis(x + gutter, y + height - gutter, width - 2 * gutter, minx, maxx, opts.axisxstep || Math.floor((width - 2 * gutter) / 20), 0, paper));
        +ax[3] && axis.push(chartinst.axis(x + gutter, y + height - gutter, height - 2 * gutter, miny, maxy, opts.axisystep || Math.floor((height - 2 * gutter) / 20), 1, paper));
    }

这可以有效地复制并粘贴到 g.bar.js 中的函数 VBarchart 中，为您提供轴选项。需要对 x 和 y 位置进行一些调整，并且 maxy 可能应该设置为 opts.total 以正确缩放 - 是的，您需要稍微放屁，但它确实有效。