frontendmemo

このサイトは、「html、css、js、ツールなどについて、自分が覚えたこと、またはいつも忘れて調べることを書き溜め、それが結果といて勉強したての初心者の方や自分と同じような技術レベルの人の助けになることを目的とするWebログ」、略してブログです。挨拶→http://frontendmemo.hatenablog.com/entry/2016/06/25/115845

chart.jsをスクロール時に発動 ドーナツ型円、縦型棒、横型棒グラフ

スポンサードリンク


スポンサードリンク


chart.jsはグラフにアニメーションを取り入れるプラグインです。

www.chartjs.org

このプラグインは、通常更新時に発動するのですが、スクロール時に発動させたいこともあるのではないでしょうか。

DEMO

See the Pen pELoRb by funclur (@funclur) on CodePen.


解説

①chart.jsを発動させるスクロールタイミングを(要素の位置 - windowの高さの2/3)にしています。

    var position01 = $('.chart-doughnut-01').offset().top - ($win.height() / 3 * 2);// ドーナツグラフのy軸 
    var position02 = $('.chart-bar-01').offset().top - ($win.height() / 3 * 2);// 縦軸棒グラフのy軸
    var position03 = $('.chart-xbar-01').offset().top - ($win.height() / 3 * 2);// 横軸棒グラフのy軸
    var flag = null;
    var flag02 = null;

それによって要素が画面の2/3に来たときに発動するようにさせます。

②flag変数をたてます。

③現在のスクロール量を取得し、要素の位置がスクロール量をオーバーかつflagがnullだったらflagを1にしてchart.jsを実行させます。
そうすることでスクロールしている間何度も発動せず1回のみの発動にすることができます。

$win.scroll(function(){
      if($(this).scrollTop() > position01 && flag === null){
            flag = 1;
        var myDoughnut = new Chart(document.getElementById('chart-doughnut-01').getContext('2d')).Doughnut(doughnutData, options);
          }
      if($(this).scrollTop() > position02 && flag02 === null){
            flag02 = 1;
        var chart = new Chart(document.getElementById('chart-bar-01').getContext('2d')).Bar(barChartData, options02);
          }
      if($(this).scrollTop() > position03){
         $('.chart-xbar-01').addClass('active');
          }
      });

  })();

おまけ 横の棒グラフ

chart.jsは恐らく横の棒グラフにするオプションがないため、css3で作成しています。

.chart-xbar-01 {
  margin-bottom: 20px;
  width: 360px;
  height: 40px;
  background: #ccc;
  position: relative;
}
.chart-xbar-01.active [class^="data-"] {
  height: 40px;
  animation: anime1 1s 1 ease;
  background: #ff8603
}
@-webkit-keyframes anime1 {
  0% {width: 0px;}
}
@keyframes anime1 {
  0% {width: 0px;}
}

同じようにスクロール量と要素の位置を比較して、超えたら.activeを付与させます。

if($(this).scrollTop() > position03){
 $('.chart-xbar-01').addClass('active');
}


下記サイトを参考にさせていただきました。
Chart.jsを使って、棒グラフ、折れ線グラフ、レーダーチャート、円グラフを表示しよう!(サンプル・解説付き) | Web制作ナビ
グラフ作成にオススメ!「Chart.js」がかんたんに使えてイイ感じ | vdeep
CSS3アニメーション:伸びる棒グラフ | hacknote