Question

我创建了一个SVG折线图。请参阅下面的屏幕截图。

enter image description here

请参阅下面的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方法或任何其他方式在折线图中创建或应用动画？

谢谢，

希瓦

Answer 1

首先，您可以将数据存储在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);

Answer 2

您可以使用SnapSvg javascript库轻松实现这一目标有关信息，您可以访问this link

＆＃13;

var snapA = Snap("#svg");

jQuery(document).ready(function() {
    var home_graphAnimation = {
    
    drawsvgline: function(data,i, color, callback) {
      var i2 = i+1;
      var circle1 = snapA.circle(data[i].x , data[i].y ,5);
      circle1.attr({
        stroke: color,
        fill: color,
      });
      var pathA = snapA.path("M "+data[i].x +" "+ data[i].y + " L " + data[i2].x + " " + data[i2].y);
      var lenA = pathA.getTotalLength();
      pathA.attr({
        stroke: color,
        strokeWidth: 4,
        fill: 'none',
        // Draw Path
        "stroke-dasharray": lenA + " " + lenA,
        "stroke-dashoffset": lenA
      }).animate({"stroke-dashoffset": 0}, 100,mina.linear,function(){

        var circle2 = snapA.circle(data[i2].x , data[i2].y ,5);
        circle2.attr({
            stroke: color,
            fill: color,
        });    
        if (data[i2+1]) {
           home_graphAnimation.drawsvgline(data,i+1,color,callback);
        }

        if (i2+1 == data.length) {
            console.log("Callback Executed");
            if(typeof callback == 'function') {
                callback(data);
                return;
            }
        }
        

      });  
    },

    drawVerticalLine: function(){
        var getPath = snapA.path('M958 420 l0 -320');
        var pathLength = getPath.getTotalLength();

        var perc = 0;
        var dotLength = 10;
        var gapLength = 10;

        getPath.attr({
            stroke: '#000',
            strokeWidth: 2,
            strokeDasharray: 0,
            strokeDashoffset: 0,
            
        });


        function verticalDashLine(){
            perc +=1;
                if(perc>100){
                    perc = 100;
                }
            var visibleLength = pathLength*perc/100;
            var drawnLength = 0;
            var cssValue = '';
            while(drawnLength < visibleLength){
             drawnLength += dotLength;
                if(drawnLength < visibleLength){
                    cssValue += dotLength+ ' ';
                    drawnLength += gapLength;
                    if(drawnLength < visibleLength){
                        cssValue += gapLength+ ' ';
                    }
                }else{
                    cssValue += (visibleLength + dotLength - drawnLength)+ ' ';
                }
            }
            cssValue += pathLength;

            if(perc<100){
             setTimeout(verticalDashLine, 10);
            }
            // console.log(cssValue);
            getPath.attr({
                strokeDasharray: cssValue
            });

            if(perc==100){
                console.log("Complete");
                verticalDashLineAfter();
            }
        }

        function verticalDashLineAfter() {

            // DRAW  Circle after dash line animation
            var circleRound = snapA.circle(958 ,100 ,5);
            circleRound.attr({
                stroke: '#000',
                strokeWidth: 2,
                fill: 'none'
            });

            // DRAW Line After Circle
            var lineAfterCircle = snapA.path("M 965 100 l 80 0");
            var lineAfterCircle_len = lineAfterCircle.getTotalLength();
            lineAfterCircle.attr({
                stroke: '#000',
                strokeWidth: 2,
                fill: 'none',
                "stroke-dasharray": lineAfterCircle_len + " " + lineAfterCircle_len,
                "stroke-dashoffset": lineAfterCircle_len
              
            }).animate({"stroke-dashoffset": 0}, 500,mina.easeinout,function(){

                var text1 = snapA.text(1060 ,108 ,"INNOVATION");
                text1.attr({
                    "fill" : "#000",
                    "class" : "invoer-text"
                });
            });
        }

        verticalDashLine();

    }    

}
    
        var data = [{"x":15,"y":181},{"x":116,"y":153},{"x":217,"y":230},{"x":321,"y":174},{"x":429,"y":225},{"x":537,"y":217},{"x":644,"y":192},{"x":747,"y":166},{"x":852,"y":157},{"x":958,"y":180},{"x":1060,"y":303},{"x":1159,"y":402},{"x":1264,"y":404},{"x":1367,"y":392},{"x":1475,"y":377},{"x":1579,"y":419},{"x":1686,"y":410},{"x":1789,"y":418},{"x":1899,"y":407}]

            var data1 = [{"x":6,"y":305},{"x":102,"y":289},{"x":213,"y":271},{"x":318,"y":310},{"x":426,"y":317},{"x":528,"y":308},{"x":637,"y":266},{"x":740,"y":258},{"x":845,"y":319},{"x":958,"y":347},{"x":1054,"y":261},{"x":1162,"y":242},{"x":1267,"y":219},{"x":1369,"y":211},{"x":1480,"y":254},{"x":1584,"y":204},{"x":1689,"y":234},{"x":1793,"y":223},{"x":1897,"y":194}];
    
            home_graphAnimation.drawsvgline(data,0, "#F6A85A",function(data){
                
                // Callback Draw Second Graph after Drawing first Graph
                home_graphAnimation.drawsvgline(data1,0, "#5DBEB7",function(data){
                    
                    // Callback Draw Verticla Line Animation After Drawing Second Graph
                    home_graphAnimation.drawVerticalLine();
                });
            });


});  //END Document Ready

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.4.1/snap.svg-min.js"></script>
<svg id="svg" viewBox="0 0 1920 1080"></svg>

＆＃13;

使用纯javascript / jquery动画的SVG折线图

2 个答案: