1

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

値が500を超えると、グラフはまったく表示されず、軸のみが1行の端にプロットされて表示される（つまり、制限を超えている）ことに気付いたので、y軸の値を動的にスケーリングする方法を知っている人はいますか？ ）。

次に、凡例または軸ラベルをグラフに追加する方法はありますか？または、グラフラベルをhtmlとして個別にコーディングする必要がありますか？

たくさんありがとう!!! その見栄えの良いツールですが、それはまったく役に立たないようです...

4

1 に答える 1

4

チャート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に設定する必要があります。そうです、少しおならをする必要がありますが、機能します。

于 2011-11-28T08:31:16.013 に答える