<h1>PieChart with Chartist</h1>
<h2>Animation and Scroll magic</h2>
<div class="scroll-line"></div>
<div class="wrapper">
 <div id="js-magic" class="magic-section">
   <p>Scroll<br>↓</p>
   <span></span>
   <div class="chart"></div>
   <div class="chart2"></div>
 </div>
</div>
body{
  font-family: 'Comfortaa', cursive;
  position: relative;
  height: 100%;
}

.wrapper{
  position: relative;
  width: 350px;
  height: 350px;
  margin: auto;
}

.scroll-line{
  display: block;
  width: 100%;
  height: 1px;
  background: #ccc;
  position:fixed;
  top:50vh;
}

.magic-section{
  position:relative;
  margin: 300px auto 800px!important;
  height: 350px;
  display: block;
  text-align:center;
  span{
     display: block;
     margin:auto;
     width: 200px;
     height: 1px;
     border-top:1px dotted #ccc;
     position:relative;
    &:before{
      content:"start";
      position:absolute;
      right:0px;
      top:-20px;
    }
  }
  p{
    font-size:30px;
    position:absolute;
    top:-200px;
    left:50%;
    transform:translate(-50%,0%);
  }
}

h1{
  text-align: center;
  letter-spacing: 2px;
  font-weight: 400;
  font-size:40px;
  color: #3b4347;
  margin:100px 0px 0px 0px;
}

h2{
  text-align: center;
  letter-spacing: 2px;
  margin-top: 20px;
  font-size:20px;
}

.chart{
  width: 344px;
  height: 344px;
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  .ct-series-a .ct-slice-donut{
    stroke:#FFDCC8;
  }
  .ct-series-b .ct-slice-donut{
    stroke:#e7e8e9;
  }
  .ct-series-c .ct-slice-donut{
    stroke:#b5d4e1;
  }
}

.chart2{
  width: 235px;
  height: 235px;
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  .ct-series-a .ct-slice-donut{
    stroke:#b7dfd2;
  }
  .ct-series-b .ct-slice-donut{
    stroke:#f3ddaf;
  }
}

.base{
  width: 350px;
  height: 350px;
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  path{
    width: 350px;
    height: 350px;
  }
}

.start{
  font-size:20px;
  display: inline-block;
  position: absolute;
  left:50%;
  top:50%;
  z-index:10;
  transition:all .3s;
  transform: translate(-50%,-50%);
  letter-spacing:0em;
  cursor: pointer;
  &:hover{
    letter-spacing:0.2em;
  }
}
View Compiled
//Scrollmagic発火
let controller = new ScrollMagic.Controller();

new ScrollMagic.Scene({
  triggerElement: '#js-magic'
}).on('start', function () {
  
  //グラフの設定
  let chartBig = new Chartist.Pie('.chart', {
      series: [91, 3, 6]
    }, {
      donut: true,
      donutWidth: 52,
      showLabel: false
    });

  let chartSmall = new Chartist.Pie('.chart2', {
      series: [80, 11]
    }, {
      donut: true,
      donutWidth: 52,
      showLabel: false
  });
  
  //js−magicにclassがついてなかったらアニメーションを発火させる
  if(!$('#js-magic').hasClass('is-animate')){
          //デカいグラフのアニメーション
          charts(chartBig);
          //小さいグラフのアニメーション
          charts(chartSmall);
        $('#js-magic').addClass('is-animate');
   }
}).addTo(controller);


//アニメーションの関数
function charts(elm) {
  
  //グラフの描画するアクション
  elm.on('draw',(data)=>{
  
  //グラフに割り当てられたDataを取り出す
  if(data.type === 'slice'){
    
    //dasharrayの長さを設定します。
    let pathLength = data.element._node.getTotalLength();
    
    //pathにstroke-dasharrayの数値を代入する。
    data.element.attr({
      'stroke-dasharray': pathLength + 'px ' + pathLength + 'px'
    });
   
   //アニメーションの設定
   let animationDefinition = {
      'stroke-dashoffset': {
        id: 'anim' + data.index,
        dur: 1000,
        from: -pathLength + 'px',
        to:  '0px',
        easing: Chartist.Svg.Easing.easeOutQuint,
        //fillの初期値を設定、これがないと最初のアニメーションがみれなくなってしまう。
        fill: 'freeze'
      }
    };
    
    //最初のdataでない場合、アニメーションの時間を計測して前のアニメーションの終了イベントを発生させる
    if(data.index !== 0){
      animationDefinition['stroke-dashoffset'].begin = 'anim' + (data.index - 1) + '.end';
    }
    
    //pathにstroke-dasharrayの初期値を代入する
    data.element.attr({
      'stroke-dashoffset': -pathLength + 'px'
    });
    
    //アニメーションの開始
    data.element.animate(animationDefinition, false);
   }
  }); 
}
View Compiled

External CSS

  1. https://cdn.rawgit.com/gionkunz/chartist-js/master/dist/chartist.css
  2. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/chartist/0.9.8/chartist.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js
  3. https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js