Question

我想单独进行折线图（路径动画）而不是整个图表区域。请参考以下JS小提琴

目前我已经为整个图表区域实现了动画，即区域rect最初为零，然后我将逐步增加宽度。它会影响其他图表，因为柱形图也在图表区域，但它会做动画链接线。请参考以下我已完成的代码段。

 doAnimation: function () {
        var clipRect = $(this.chartObj.gSeriesEle).find("#" + this.chartObj.svgObject.id + "_ChartAreaClipRect");
        $(clipRect).animate(
                                 { width: this.chartObj.model.m_AreaBounds.Width },
                                 {
                                     duration: 2000,

                                     step: function (now, fx) {
                                         $(clipRect).attr("width", now);
                                     }
                                 });
       this.chartObj.model.Animation=false;

    },

我需要获得单独的“line”路径矩形，然后我想在jquery animate中逐步增加单个线路径矩形的宽度，而不是增加整个图表区域的宽度。

如何计算单个路径的矩形，然后增加矩形的宽度。

<g id="container_svg_SeriesGroup_0" transform="translate(144,432)"><path id="container_svg_John_0" fill="none" stroke-width="3" stroke="url(#container_svg_John0Gradient)" stroke-linecap="butt" stroke-linejoin="round" d="M -2454.7999999999997 -125.8888888888889 L 0 0 M 0 0 L 258.40000000000003 -45.77777777777778 M 258.40000000000003 -45.77777777777778 L 516.8000000000001 -11.444444444444445 M 516.8000000000001 -11.444444444444445 L 646 -183.11111111111111 "/></g>

谢谢，

希瓦

使用jquery在svg中的折线图动画

0 个答案: