2012-03-15 6 views
4

Raphael SVGライブラリのグラフィック拡張であるgRaphaelを使用して、ライブ更新線グラフの実装を進めています。グラフのドキュメント、最近のサンプルなど

これは、ほぼリアルタイムで更新するプロジェクトとしてこれをやっている人の例を見つけることができません。これは問題ありません。私は、新しいデータセットを使ってグラフ上のリフレッシュを呼び出す方法があると仮定しています(新しいラファエルオブジェクト全体を毎回再初期化する必要はありません!)が、問題になります:

どこでも正確なドキュメンテーションであるようです。私はStackOverflowのこの質問を発見しました:Graphael line chartこれはこのドキュメンテーションプロジェクト:https://github.com/kennyshen/g.raphael/tree/master/docsにつながりましたが、結果は寒かったです。提供された例を使用して、私はいくつかのエラーに遭遇した:実施例で使用

  1. 構文r.g.linechart()(rはラファエルのオブジェクトであり、I Gが内gRaphaelプロパティであると仮定している)はもはや有効ではなかったです。途中のどこかで、r.linechart()が働くように、誰かがRaphaelオブジェクトを適切に拡張するように切り替えていたに違いありません。

  2. linechart()に渡されたパラメータが正しくないため、再度定義されていないエラーが発生します。私が#x, #y, width, height, arrayX, arrayYのパラメータだけを渡してチャートのラベルなどを落とした場合は、プレーンラインを描画できます。しかし、もちろん、私はなど、私の軸にラベルを付け、凡例を提供できるようにする必要があり

言うまでもなく、APIドキュメントのないライブラリは、誰もはるかに良いをするつもりはないが、重鎮があります厳密にコード自体を読むことに基づいて学びたいと思っている人たちがいる。私はそれらの一つではありません。私はおそらくよくコメントされた例で、おそらくライブアップデートを使用してOKを行うだろう。

だから私は、質問があると思います:

  1. 誰も私がにリンクされているものよりも優れたドキュメントを知っていますか?
  2. 誰かが例題を教えてくれますか?
  3. 誰かがlinechart()が受け入れるパラメータの適切な項目化を提供できますか?

ありがとう! fork in GitHub that is working on the documentation and examples.

あなたはdownloadコードに必要な、あなたのコンピュータから、それを表示されますがあり

var r = Raphael('line-chart'); 

// did NOT work --> 
var linechart = r.g.linechart(
    10,10,300,220,[1,2,3,4,5],[10,20,15,35,30], 
    {"colors":["#444"], "symbol":"s", axis:"0 0 1 1"} 
); 

// worked in a limited way, rendering a plain line with no visible labels/graph --> 
var linechart = r.linechart(
    10,10,300,220,[1,2,3,4,5],[10,20,15,35,30] 
); 
+0

ます。http://グラム.raphaeljs.com/reference.html – Daniel

答えて

0

:レコードの

は、ここで私はこれまで午前どのくらいです。進行中の作業ですが、g.Raphaelの公式ページよりも多くのことがあります。

私はまた、this小さな投稿といくつかの例が見つかりました。

+0

返信いただきありがとうございます。 oise。あなたが参照しているフォークは、「失敗した」ドキュメント(Raphaelオブジェクト内で無効な '.g'プロパティを使用したドキュメント)を見つけた場所です。あなたが言及した他の投稿は有望でしたが、 's'は 'symbol'パラメータの値として失敗しました。とても奇妙。私は当分flotr2に切り替えましたが、プロトタイプからプロダクションに移行する際にRaphael/gRaphaelを再訪する可能性があります。再度、感謝します! –

+0

前のコメントで述べたように、この文書は完全な解決策ではありませんでした。しかし、それは私が(flotr2に移動する前に)来た最も近いので、私は受け入れられたとマークしています。 –

+0

https://github.com/kennyshen/g.raphaelリンクが壊れています。 – derekdreery

2

私はまだラファエルを勉強しようとしていますが、私が使っているプラ​​イマリリソースは次のとおりです:http://g.raphaeljs.com/reference.htmlと同じです。「ここ

はかなりノックアウト/ gRaphael、PROBない最善の解決策が、その考えに更新折れ線グラフオフに引っ張るフィドルです:http://jsfiddle.net/kcar/mHG2q/

だけのメモを、私はそれまでの学習を開始しませんでした私は(エラーの多い)トライアル/エラーで読書を組み合わせ、そのバイオリンを弾くと、物事がどのように変化するかを見

それのための基本的なコードは次のようである:。

//constructor 
var lines = r.linechart(10, 10, width, height, xVals, yVals, { nostroke: false, axis: "0 0 1 1", symbol: "circle", smooth: true }) 
    .hoverColumn(function() { //this function sets the hover tag effect 
     this.tags = r.set(); 

    for (var i = 0, ii = this.y.length; i < ii; i++) { 
     this.tags.push(r.tag(this.x, this.y[i], this.values[i], 160, 10).insertBefore(this).attr([{ fill: "#fff" }, { fill: this.symbols[i].attr("fill") }])); 
     } 
    }, function() { 
     this.tags && this.tags.remove(); 
     }); 

lines.symbols.attr({ r: 3 }); //this adjusts size of the point symbols 
関連する問題