0

1 つの SVG 折れ線グラフを作成しました。以下のスクリーンショットを参照してください。

ここに画像の説明を入力

折れ線グラフについては、以下の SVG 要素を参照してください。

<svg>
-------------------------------------------------------------
<path id="Ram" fill="none" stroke-width="3" stroke="url(#container_Ram1Gradient)" stroke-linecap="butt" stroke-linejoin="round" d="M 142.8 90.51999999999998 L 213.6 371.32 M 213.6 371.32 L 284.4 306.52 M 284.4 306.52 L 355.2 241.71999999999997 M 355.2 241.71999999999997 L 426 163.96000000000004 M 426 163.96000000000004 L 496.8 224.44000000000003 M 496.8 224.44000000000003 L 567.5999999999999 129.39999999999998 M 567.5999999999999 129.39999999999998 L 638.4 202.83999999999997 M 638.4 202.83999999999997 L 709.2 215.8 " clip-path="url(#ChartAreaClip)"/>
-------------------------------------------
</svg>

その折れ線グラフでアニメーションを実行したい。つまり、折れ線グラフは動的に表示され、実行時に描画されます。

以下のリンクを参照してください。

http://www.highcharts.com/demo/

私は<animate> and <animateMotion>SVGアニメーションに関連するものを使用したくありません。一部のアニメーションがすべてのブラウザで機能しないためです。

だから私は純粋なjqueryアニメーションを実行したい(つまり、jquery.animateメソッドを使用して)。jquery animate メソッドまたはその他の方法を使用して折れ線グラフでアニメーションを作成または適用するにはどうすればよいですか?

ありがとう、

シヴァ

4

2 に答える 2

0

まず、json オブジェクトにデータを保存できます。

{
    "John": [
        {
            "x": 142.8,
            "y": 90.52
        },
        {
            "x": 213.6,
            "y": 371.32
        }
    ]
}

svg パスは次のようになります。

<path id="Ram" fill="none" stroke-width="3" stroke="url(#container_Ram1Gradient)" stroke-linecap="butt" stroke-linejoin="round" d="" clip-path="url(#ChartAreaClip)"/>

ここで、パスを次のように javascript/jquery で埋める必要があります。

var counter = 0;

function addPoint(x, y, isFirst){
    var new_point = (isFirst? " M " : " L ")+x+" "+y;
    $('#Ram').attr("d", $('#Ram').attr("d")+""+new_point);
    counter++;
    if(counter < John.length){
        setTimeout(addPoint(John[counter].x, John[counter].y, false),200); // Add a new point after 200 milliseconds
    }
}

addPoint(John[0].x, John[0].y, true);
于 2013-05-09T15:17:51.983 に答える