0

私はJava言語を使用してWebアプリケーションで作業しています。複合スパークライングラフを表示する必要があるため、jspページでスパークラインjqueryを使用しています。スパークラインが描かれているキャンバスの背景に画像を設定する必要があります。このリンクからsparklinejqueryを使用しています。

http://omnipotent.net/jquery.sparkline/

私が書いているコードは

var data1 = [-10,10,9、-9,7、-5,9、-8,3,0,3、-8,4、-7]; var data2 = [-10,0,6、-9,7、-5,9、-3,7,0,3、-8,4、-2]; $('#id')。sparkline(data1、{type:'line'、normalRangeMin:0、normalRangeMax:0、spotRadius: '0'、width: '630px'、height: '100px'、composite:true、fillColor :false、lineColor:'緑'}); $('#id')。sparkline(data2、{type:'line'、normalRangeMin:0、normalRangeMax:0、spotRadius: '0'、width: '630px'、height: '100px'、composite:true、fillColor :false、lineColor:'赤'});

と体の中で

上記のjqueryを使用すると、複合線グラフを描画できますが、タグにスタイル(background-image)を設定すると、それ自体がキャンバスを追加するため、スパークラインキャンバスの背景に表示されません。私の問題は、スパークラインキャンバスのすぐ後ろに背景画像を表示することです。

上記の問題を解決するために、私は次のような他の多くのjqueriesで試しました:

http://willarson.com/code/sparklines/sparklines.html

これは、キャンバスに背景画像を設定する場合は正常に機能しますが、複合線グラフは使用できません。

そしてもう一つは

http://benpickles.github.com/peity/

私もこれで同じ問題を抱えています。これは、複合線グラフ用でもありません。

最初のjqueryリンクのスパークラインキャンバスのすぐ後ろに背景画像を設定する、または他の2つのリンクを使用して複合線グラフを描画する方法、またはスパークラインに背景画像を設定できる別のjqueryがある場合は、貴重な提案をお願いします。キャンバスであり、複合線グラフをサポートします。

貴重なご提案をよろしくお願いいたします。

4

1 に答える 1

0

これで、キャンバスのすぐ後ろに背景画像を取得し、その上に複合線グラフを描画する方法が得られました。

このリンクからsparklines.jsを使用しています。 http://willarson.com/code/sparklines/sparklines.html

与えられたドキュメントに従って、新しいSparkline('canvas_id'、'data'、'opts')。draw();を呼び出す必要があります。1つのパラメーターとしてcanvas_idを受け入れる関数。2つの異なる線を描画するために同じcanvas_idで同じ関数を2回呼び出しています(または、このスクリプトが受け入れる他のタイプのグラフを呼び出すことができます)。

2番目の呼び出しは、最初のグラフの上に別のグラフを描画します(これは、http://omnipotent.net/jquery.sparkline/スクリプトが複合グラフの描画に使用するのと同じ方法です)。これは、複合グラフを描くのに役立ちます。関数呼び出しは次のようになります。

new Sparkline('canvas_id'、'data1'、'opts1')。draw(); new Sparkline('canvas_id'、'data2'、'opts2')。draw();

キャンバスのすぐ後ろに背景画像を設定するために、canvasタグでスタイルを設定しています。

上記の解決策は、適切な結果を得るためにうまく機能しています。誰かがより良い答えを見つけたら。投稿してください。

ありがとう

于 2012-03-19T07:04:01.407 に答える