web-dev-qa-db-ja.com

そのセクションにスクロールしたときにChart.jsをアニメーション化するにはどうすればよいですか？

Chart.jsの円グラフを使用しようとしています（ http://www.chartjs.org/docs/#pieChart-exampleUsage ）。すべてがスムーズに機能しますが、アニメーションはページが読み込まれるとすぐに発生しますが、ユーザーは下にスクロールしてグラフを表示する必要があるため、アニメーションは表示されません。とにかく、その位置までスクロールしたときにのみアニメーションを開始させることができますか？また、可能であれば、そのチャートが表示されるたびにアニメーション化することは可能ですか？

私のコードは次のとおりです。

<canvas id="canvas" height="450" width="450"></canvas>
    <script>
        var pieData = [
                {
                    value: 30,
                    color:"#F38630"
                },
                {
                    value : 50,
                    color : "#E0E4CC"
                },
                {
                    value : 100,
                    color : "#69D2E7"
                }

            ];

    var myPie = new Chart(document.getElementById("canvas").getContext("2d")).Pie(pieData);

    </script>
javascriptjqueryhtml5chartshtml5-canvas
8
Suthan Bala

何かが表示可能かどうかのチェックとフラグを組み合わせて、グラフがビューポートに表示されてから描画されたかどうかを追跡できます（ただし、投稿されたプラグインでこれを行う方が簡単です）。

http://jsfiddle.net/TSmDV/

var inView = false;

function isScrolledIntoView(elem)
{
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    return ((elemTop <= docViewBottom) && (elemBottom >= docViewTop));
}

$(window).scroll(function() {
    if (isScrolledIntoView('#canvas')) {
        if (inView) { return; }
        inView = true;
        new Chart(document.getElementById("canvas").getContext("2d")).Pie(data);
    } else {
        inView = false;  
    }
});
13
Jason P

あなたがそれを行うことができるかどうかはわかりません、私は同じ問題を抱えていて、この簡単な方法でプラグインなしでそれを解決しました、チェックしてください：

$(window).bind("scroll", function(){            
    $('.chartClass').each(function(i){ 
        var dougData = [
            {value: 100, color:"#6abd79"},
            {value: 20, color:"#e6e6e6"}
        ];
        var graphic = new Chart(document.getElementById("html-charts").getContext("2d")).Doughnut(dougData, options);
        $(window).unbind(i);
    });
});
1
user3577712

Chart.jsでも同じ問題があり、本当に素晴らしい解決策を見つけました。 GitHubには、FVANCOPによって ChartNew.js と呼ばれるパッケージがあります。彼はそれを拡張し、いくつかの機能を追加しました。

サンプルを見てください。チャートは下にスクロールして描かれています。

責任は声明です

dynamicDisplay : true
1
Holger

これはあなたが望むものです：

スクロール後に要素が表示されるかどうかを確認します

次回はすでに答えがあるかどうかを確認してください;）

または： jquery.appear

0
bitoiu