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以使缩放正确 - 是的，你需要稍微放屁，但它确实有效。

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

1 个答案: