chart.jsの棒グラフのアニメーションをスクロールで画面内に表示された際に発火する方法

Question

２回目の投稿です。
よろしくお願いします。

【質問】
chart.jsで棒グラフを表示しているのですが、
棒グラフが上に伸びていくアニメーションをスクロールで画面内に表示された際に発火する方法を教えて頂きたいです。
※グラフは問題なく表示されます。

以下の記述は、実際にchart.jsで棒グラフを表示するために書いたものです。
※graph.phpを用意して、その中に記述しております。

【記述内容】

<canvas id="sample" width="380" height="330" style="display: block;"></canvas>
    <script>
        var $value = <?php echo $value; ?>;
        var ctx = document.getElementById("sample").getContext('2d');
        var sample = new Chart(ctx, {
            type: 'bar',
            title: "◯◯",
            data: {
                labels:  [["◯◯","◯◯"], ["◯◯","◯◯"], ["◯◯","◯◯"], ["◯◯","◯◯"], ["◯◯","◯◯"]],
                datasets: [{
                        label: '◯◯',
                        lineTension: 0,
                        fill: false,
                        backgroundColor: "#cb207c",
                        borderWidth: 1,
                        data: [
                            <?php
                                $hogehoge = 1;
                                if(get_field('hogehoge',$value)){
                                    $hogehoge = get_field('hogehoge',$value);
                                };
                                echo $hogehoge;
                            ?>,
                        ],
                    },
                    {
                        label: '◯◯',
                        lineTension: 0,
                        fill: false,
                        backgroundColor: "#cb207c",
                        borderWidth: 1,
                        data: [
                            <?php
                                $hogehoge = 1;
                                if(get_field('hogehoge',$value)){
                                    $hogehoge = get_field('hogehoge',$value);
                                };
                                echo $hogehoge;
                            ?>,
                        ],
                    },
                    {
                        label: "◯◯",
                        lineTension: 0,
                        fill: false,
                        backgroundColor: "#cb207c",
                        borderWidth: 1,
                        data: [
                            <?php
                                $hogehoge = 1;
                                if(get_field('hogehoge',$value)){
                                    $hogehoge = get_field('hogehoge',$value);
                                };
                                echo $hogehoge;
                            ?>,
                        ],
                    },
                    {
                        label: "◯◯",
                        lineTension: 0,
                        fill: false,
                        backgroundColor: "#cb207c",
                        borderWidth: 1,
                        data: [
                            <?php
                                $hogehoge = 1;
                                if(get_field('hogehoge',$value)){
                                    $hogehoge = get_field('hogehoge',$value);
                                };
                                echo $hogehoge;
                            ?>,
                        ],
                    },
                    {
                        label: "◯◯",
                        lineTension: 0,
                        fill: false,
                        backgroundColor: "#cb207c",
                        borderWidth: 1,
                        data: [
                            <?php
                                $hogehoge = 1;
                                if(get_field('hogehoge',$value)){
                                    $hogehoge = get_field('hogehoge',$value);
                                };
                                echo $hogehoge;
                            ?>,
                        ],
                    },
                ]
            },
            options: {
                responsive: false,
                legend: {
                    display: false
                },
                scales: {
                    yAxes: [{
                        ticks: {
                            stepSize: 25,
                            beginAtZero: true,
                            min: 0,
                            max: 100,
                            display:false
                        },
                        gridLines: {
                            drawTicks:false,
                            drawBorder:false,
                            lineWidth:2,
                            borderDash:[8,8],
                            color:'black',
                        }
                    }],
                    xAxes: [{
                        categoryPercentage: 1.0,
                        barPercentage: 0.7,
                        ticks: {
                            fontColor:'white',
                            fontFamily:'ほげほげ',
                            fontSize:16
                        },
                        gridLines: {
                            display:false
                        }
                    }]
                }
            }
        });
    </script>

上記の通りとなります。

よろしくお願いします。

Answer 1

これが正規の方法かどうかわかりませんが、次のような方法で実現できるのではないでしょうか。よろしければお試しになってみてください。

1. 最初のチャート描画時は datasets の各 data を空の配列にしてチャートを描画する（あるいは値が 0 の配列（質問文のコードを読むかぎり 1 でしょうか、適切なデフォルト値に読み替えてください））
2. スクロールイベントにイベントハンドラをセットして、チャートが画面内に入ったところで datasets の各 data に実データを入れる
3. 2 の結果グラフが伸びるアニメーションが画面内で行われる

現在のコードを自力で書かれているのであれば、 1 は特に問題ないのではないかと思います。 2 のやり方は公式ドキュメントの次の箇所をお読みになればおわかりになるものと思います。

• Adding or Removing Data | Updating Charts · Chart.js documentation

そこまで厳密な挙動を求めていらっしゃらないのであれば

1. スクロールイベントにイベントハンドラをセットして、チャートのエリアが画面内に入ったところでチャートを描画する（＝ Chart インスタンスを生成する）

とするシンプルなアプローチもありかもしれません。

いずれも私の手元で動作確認していない単なるアイデアなのでご了承ください。

……

余談ですが、現状 PHP から JavaScript へのデータの渡し方は次のようにされていますが

        var $value = <?php echo $value; ?>;

PHP から JavaScript にデータを渡すときには wp_localze_script() 等専用の API を使うのがよいかと思います。以下参考です。

• Example | Function Reference/wp localize script « WordPress Codex
• How to Pass PHP Data and Strings to JavaScript in WordPress

Comments

[ArisaProgrammer]

ご回答頂き、ありがとうございます！！
上記の方法で試した結果、できました！！

そして、データの渡し方を教えてくださり、ありがとうございます。
大変勉強になりました。

また何かあった際は、よろしくお願いします。

[gh640]

そうですか！ご解決されたとのことでよかったです :)