折れ線グラフのanimationについて

Question

前提・実現したいこと

業務でWebページ上にグラフを作成する事になりました。
それにアニメーションを付与したいです。

アニメーションの内容は左から折れ線が順々に表示されていくアニメーションを作成したいです。
折れ線以外の要素は表示されたままで大丈夫です。

現在chart.jsを読み込んで折れ線グラフを作成しました。

発生している問題・エラーメッセージ

animation設定の仕方がわからない。

該当のソースコード

<div class="graph-wrap">
  <canvas id="js-line-graph"></canvas>
</div>

.graph-wrap {
  width: 100%;
}

    <script>
        window.addEventListener('load', function () {
            var ctx = document.getElementById('js-line-graph');

            var lineGraph = new Chart(ctx, {
                type: 'line',
                data: {
                    labels: ['4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月', '1月', '2月', '3月',].map( function(v) { return v.split("") } ),
                    datasets: [
                        {
                            label: '',
                            data: [40, 30, 48, 33, 30, 30, 38, 33, 28, 40, 31, 40],
                            pointBackgroundColor: "#000",
                            borderColor: '#000',
                            backgroundColor: 'rgba(0, 0, 0, 0)'
                        }
                    ]
                }, 
                options: {
                    legend: {
                        display: false
                    },
                    scales: {
                        xAxes: [{
                            gridLines: {
                                display: false,
                                drawBorder: true,
                                color: '#ccc'
                            }
                        }],
                        yAxes: [{
                            gridLines: {
                                display: false,
                                drawBorder: true,
                                color: '#ccc'
                            },
                            scaleLabel: {
                                display: true,
                                fontSize: 12
                            },
                            ticks: {
                                suggestedMax: 40,
                                suggestedMin: 0,
                                stepSize: 5,
                                callback: function(value, index, values){
                                    return  value + '人'
                                }
                            }
                        }]
                    }
                }
            });
        });
    </script>

試したこと

Chart.jsを使って「動的に」グラフをアニメーションさせる方法というタイトルで、これをすれば出来ると思ったのですが、読み解けずです...
https://blog.goo.ne.jp/xmldtp/e/95890e6dd83d76d601b66513bf3f1993

公式サイトに線グラフの項目があったのですが、該当のアニメーションは発見できずでした。
https://misc.0o0o.org/chartjs-doc-ja/charts/line.html

公式サイトにアニメーションの項目があり、onProgressで設定すればできると思ったのですが、引数のanimationやanimationObjectやらそこに何を設定すれば良いのかわからずです。
https://misc.0o0o.org/chartjs-doc-ja/configuration/animations.html

補足情報（FW/ツールのバージョンなど）

実力不足で調べただけで全く実装できていないのですが、知見ある方いらっしゃいましたらお力添えよろしくお願い致します。

Answer 1

なんか他にもっと上手い方法があるような気がしますが……
サンプル

        window.addEventListener('load', function () {
            var data = [40, 30, 48, 33, 30, 30, 38, 33, 28, 40, 31, 40];
            var lineGraph = new Chart(ctx, {
               data: {
//...
                    datasets: [
                        {
                            label: '',
                            data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
//...
                }, 
                options: {
//...
                    animation:{
                        onComplete:function(animation){
                            setTimeout(test,100,0);
                        }
                    },
//...
                }
            });
            function test(i){
                if ( i < data.length ){
                    lineGraph.data.datasets[0].data[i] = data[i];
                    lineGraph.update();
                    setTimeout(test,100,i+1);
                }
            }

ちょっとよくなかったので修正

        window.addEventListener('load', function () {
            var ctx = document.getElementById('js-line-graph');
            var data = [40, 30, 48, 33, 30, 30, 38, 33, 28, 40, 31, 40];
            var i = 0;
            var lineGraph = new Chart(ctx, {
                type: 'line',
                data: {
//...
                    datasets: [
                        {
                            label: '',
                            data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
//...
                }, 
                options: {
//...
                    animation:{
                        onComplete:function(animation){
                            setTimeout(test,100);
                        }
                    },
                }
            });
            function test(){
                if ( i < data.length ){
                    lineGraph.data.datasets[0].data[i] = data[i];
                    lineGraph.update();
                    i++;
                    setTimeout(test,100);
                }
            }
        });

Comments

[akiiro_]

＞Lhankor_Mhyさん

返事が遅くなり申し訳ございません。
ありがとうございました。

無事に実装出来、大変助かりました！！