Raphael jsグラフにX軸とY軸のラベルを追加する方法

Question

Raphael.jsを使用してデータのグラフを作成しようとしています。その後、私が解決しようとしているjsにいくつかの制限があることを認識しています。 。

y軸の値を動的にスケールする方法を知っている人は、一度値が500を超えるとグラフが表示されず、1つの行の極端にプロットが表示される限界を超えて）。

第2に、凡例や軸ラベルをグラフに追加する方法はありますか？あるいは、グラフのラベルを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)); 
    } 

これは効果的にコピーして、グラムで機能VBarchartに貼り付けることができます.bar.jsを使用して軸オプションを指定します。 xとyの位置を少し調整する必要があります。そして、maxyは、スケーリングを正しく行うためにopts.totalに設定する必要があります。そうですね、それをちょっとだけお楽しみください。