1

ちょっとした前提: 私はダイエットをしていて、減量のグラフを描こうとしています.

そのために、小さな django アプリを使用して重量測定値を保存し、gRaphael ( http://g.raphaeljs.com/ ) グラフ作成ライブラリを使用してレポートを作成しています。ここで wip を見ることができます: http://www.totanus.net/weight/

現時点では、「ymd」形式を使用して X 軸に日付を印刷して適切に並べていますが、満足していません (実際、グラフが正しいかどうかさえわかりません...)。日付をレンダリングするためのより良い方法があるかどうか疑問に思っています.

主な質問は次のとおりです。

  1. 「100610」または「20100610」以外の別のラベルを使用する方法はありますか?
  2. x 軸と y 軸の固定ラベルを n 日または n kg ごとに設定する方法はありますか?
  3. この種のグラフをレンダリングする際のベスト プラクティスを教えてください (全体的な傾向を計算することに特に関心があります)。

助けてくれてありがとう！

テオ

4

4 に答える 4

5

xオブジェクトである が与えられたDate場合、次の手順を使用してこれを達成できました。

  1. 最も低い値を取り、そのメソッドDateの値を変数にキャッシュします ( )getTime()originX

  2. Date( )ごとcurDateに、 からの時間オフセットに変換しoriginXます。

    var timePassed = curDate.getTime() - originX

  3. xに対してプロットしyます。

上記は、ラベルが UTC 時間からのミリ秒であるグラフを示しています。見栄えを良くするために、@Alastairが提案するようにしてください。

サンプルの jQuery コードを次に示します。formatDate()(日付を適切にレンダリングするには、関数を提供する必要があることに注意してください)

$.each(chart.axis[0].text.items, function(i, label) {
    var old = label.attr("text");
    if(old) {
        var newLabel = formatDate(originX + x);
        if(newLabel) {
            label.attr({ text: newLabel });
        }
    }
});

それが役立つことを願っています！

于 2011-02-01T09:17:09.733 に答える
3

このコードはテストしていませんが、同じ問題を調査していました。

時間の整数表現 (1970 年 1 月 1 日からのティック数) を x 軸の値として格納すると、値を反復処理して日付に変換できます。

これについてのアイデアは、http: //github.com/DmitryBaranovskiy/g.raphael/issues#issue/8から得ました。

var canvas = Raphael("holder")
graph = canvas.g.linechart(....)

$.each(this.graph.axis[0].text.items, function (index,label) {
    originalText = label.attr('text'); 
    newText = /* some transformation to originalText */
    label.attr({'text': newText});
});

newText は、元のテキスト値 (ティック単位の時間) から日付文字列への変換です。

私が言ったように、私はこのコードをテストしていませんが、アイデアは理論的には健全です。

于 2010-08-09T23:48:45.513 に答える
1

私は初心者です。これはコードから見つけたものです。

graph.axis[0].text.items[0].attr({'text': "Jan 3 2010"}) ;

于 2010-11-16T17:14:39.913 に答える
1

参照: http://weblog.bocoup.com/alternate-x-axis-intervals-in-g-raphael-js-linechartの 2 番目の部分。Alastair の解決策と同じですが、同じことを別の方法で説明すると役立つ場合があります。

于 2010-11-16T14:55:42.867 に答える