4

gRaphael で作成した折れ線グラフがあります。軸と目盛りがありますが、グリッド線が欲しいです。これを達成するための組み込みの方法や、私を助けるライブラリのアドオンはありますか?

4

2 に答える 2

7

gRaphaelにはグリッド線を追加する方法が組み込まれていませんが、ソースコードを編集するか、作成後にグラフオブジェクトを操作することで、グリッド線を簡単に描画できます。

RaphAlyticsという拡張機能を見つけdrawGrid()、グリッド付きのバウンディングボックスが必要な場合に その関数を使用しました。

グリッド線を描画するために、必要に応じてこの関数を任意のgRaphaelグラフに適合させることができます。折れ線グラフでは、折れ線グラフの左軸マークに合わせた水平グリッド線を描画する必要があったため、次のような例として関数を使用しました。

// Draw horizontal gridlines
for (var i = 0; i < g.axis[1].text.items.length; i++) {
    r.path(['M', x, g.axis[1].text.items[i].attrs.y, 'H', w + x]).attr({
        stroke : '#EEE'
    }).toBack();
}

その例を説明するための実用的なフィドルは次のとおりです。http：//jsfiddle.net/KM3BB/1/

于 2012-10-19T01:58:00.207 に答える
0

昨日やってみました。簡単な答え: gRaphaël は、折れ線グラフ オプションや軸オプションを使用してこれを行うことはできません。Raphaël を使用して自分で行う必要があります。
何かのようなもの：

var r = Raphael("holder"), txtattr = { font: "12px sans-serif" };
r.path('M 15 200.5 L 310 200.5 M 15 180.5 L 310 200.5');
r.linechart(10, 10, 300, 220, x, [y, y2, y3]);

これは、私の折れ線グラフの下に、15,200.5 から始まり、310,200.5 まで直線を描き、15,180.5 に移動し、310,180.5 まで直線を描くパスを描くことを意味します。理由は聞かないでください。.5 は、ストロークを実際に 1 ピクセル幅で真っ黒にするために重要です。そうしないと、不透明度 50% で幅 2px にエイリアスされるようです。折れ線グラフに関する正確な配置を自分で計算する必要があります。

に変更することで、プレイグラウンドのパス機能で遊ぶこともできます。rpaper

入力の最小値と最大値だけではなく、軸の正確な範囲を定義するようなものを探している場合は、 Google Chart Toolsを検討することもできます。

于 2012-09-29T00:16:41.957 に答える