如何在拉斐尔js图表上添加X轴和Y轴标签

Question

我试图使用Raphael.js来做一些很好的数据图形后，我发现有几个限制，我试图解决的js 。

是否有人知道如何动态缩放y轴值，因为我已经意识到，一旦值超过500，图形根本不会出现，只有轴出现在一条线的极端边缘处即超过极限）。

其次有没有办法给图表添加图例或轴标签？或者必须将图形标签单独编码为html？

Thanks Lots !!!它是一个很好看的工具，但它似乎很没用...

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是复制并粘贴到功能VBarchart .bar.js给你的轴选项。需要对x和y位置进行一些调整，并且maxy应该设置为opts.total以获得正确的缩放比例 - 是的，您需要放松一下，但它确实有效。