如何在拉斐爾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以獲得正確的縮放比例 - 是的，您需要放鬆一下，但它確實有效。