4

私は、RaphaelSVGライブラリのグラフィック拡張であるgRaphaelを使用したライブ更新線グラフの実装に取り​​組んでいます。

ほぼリアルタイムの更新プロジェクトとしてこれを行っている人の例は見当たらないようですが、これは問題ありません。新しいデータセットを使用してグラフの更新を呼び出す方法があると思いますが（毎回まったく新しいRaphaelオブジェクトを再初期化する必要はありません！）、そこに問題があります。

正確なドキュメントはどこにもありません。私はこのStackOverflowの質問を発見しました：Graphael折れ線グラフは、このドキュメントプロジェクトにつながりました：https ：//github.com/kennyshen/g.raphael/tree/master/docs 、しかし結果は冷たくなりました。提供された例を使用して、私はいくつかのエラーに遭遇しました：

  1. 例で使用されている構文r.g.linechart()は無効になりました（ここで、rはRaphaelオブジェクトであり、gは内のgRaphaelプロパティであると想定しています）。途中のどこかで、誰かがRaphaelオブジェクトを適切に拡張して機能するように切り替えたに違いありませんr.linechart()。

  2. 渡されたパラメーターlinechart()が正しくないため、再び未定義のエラーが発生しました。パラメータのみを渡し#x, #y, width, height, arrayX, arrayYてチャートラベルなどをドロップすると、無地の線を描くことができます。ただし、もちろん、軸にラベルを付けたり、凡例などを提供したりできる必要があります。

言うまでもなく、APIドキュメントのないライブラリは、だれにもあまり役に立たないでしょうが、コード自体を読むことに厳密に基づいて学ぶことをいとわない頑固者がそこにいます。私はその一人ではありません。よくコメントされた例で、できればライブアップデートを使用して、おそらく大丈夫でしょう。

だから私は質問が次のとおりだと思います：

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

ありがとう！

記録のために、これが私がこれまでにどれだけ離れているかです：

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]
);
4

2 に答える 2

2

私はまだRaphaelを自分で学ぼうとしていますが、これまで使用してきた主なリソースは次のとおりです。http: //g.raphaeljs.com/reference.htmlと同じ「g」はありません。

これは、knockout / gRaphaelを使用して折れ線グラフを更新するフィドルです。これは最善の解決策ではない可能性がありますが、そのアイデアは次のとおりです。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
于 2013-02-04T20:38:23.570 に答える
0

ドキュメントと例に取り組んでいるGitHubにフォークがあります。

コードをダウンロードして、コンピューターから表示する必要があります。これは進行中の作業ですが、公式のg.Raphaelページで見つけることができる以上のものです。

また、いくつかの例を含むこの小さな投稿を見つけました。

于 2012-03-21T10:15:57.627 に答える