グラフ領域全体ではなく、個別に折れ線グラフ (パス アニメーション) を実行したい。以下のJSフィドルを参照してください
現在、グラフ領域全体のアニメーションを実装しています。つまり、領域四角形は最初はゼロで、幅を段階的に増やします。縦棒グラフもグラフ領域にあるため、他のグラフに影響しますが、アニメーションリンクラインを行います。現在私が行っている以下のコードスニペットを参照してください。
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;
},
個々の「線」パスの四角形を取得する必要があり、グラフ領域全体の幅を増やす代わりに、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>
ありがとう、
シヴァ