よく採用サイトなどで、『わが社のあれこれ』と題して男女比や年齢層、眼鏡率などのグラフが用いられていますね。アニメーションが付いているものも多く、 見ているとちょっと気持ちいいです。
そこで今回はJavaScriptのライブラリCreateJSを用いて円グラフをアニメーションさせてみました。

サンプルはこちら
サンプルコード（GitHub）はこちら

見た目の説明としましては、ベースとなる円に円弧を重ね、さらにその上に少し小さな円を重ねてテキストを置いている、という状態です。

スクリプトは以下になります。

ポイントとなるのは円弧の部分です。.arcメソッドの引数には(X座標, Y座標, 開始角[ラジアン], 終了角[ラジアン], 反時計回りをするか)を指定します。
開始角はデフォルトでは15時の位置にあるため、startAngleはあらかじめ90度マイナスしておきます。ラジアンは[角度 × Math.PI ÷ 180]で求めることが出来ます。

少々強引な方法かもしてませんが、あらかじめ円弧arcには独自プロパティとしてarc.endAngle = 0 を指定しておき、この.endAngleをトゥイーンでアニメーションさせます。円弧を描く.arcメソッドは毎フレームごとに呼び出されるため、グラフのアニメーションが可能になります。

イージングの種類

イージングの種類を指定することで、緩急をつけたりいきいきとしたモーションを表現することが出来ます。

サンプルはこちら
サンプルコード（GitHub）はこちら

for (let i=0; i<arcArray.length; i++) {
  switch(i) {
    case 0: // 最初がゆっくり　後から加速
      createjs.Tween.get(arcArray[i])
        .to({endAngle : perseNumArray[i] * 3.6}, 800, createjs.Ease.cubicIn);
    break;
    case 1:	// 最初が早い 後がゆっくり
      createjs.Tween.get(arcArray[i])
        .to({endAngle : perseNumArray[i] * 3.6}, 800, createjs.Ease.cubicOut);
    break;
    case 2: // 最初と最後がゆっくり
      createjs.Tween.get(arcArray[i])
        .to({endAngle : perseNumArray[i] * 3.6}, 800, createjs.Ease.cubicInOut);
    break;

  }
}

時間差でアニメーション

.waitメソッドで時間を指定し、アニメーションを遅らせることが出来ます。

サンプルはこちら
サンプルコード（GitHub）はこちら

for (let i=0; i<arcArray.length; i++) {
  switch(i) {
    case 0:
      createjs.Tween.get(arcArray[i])
        .to({endAngle : perseNumArray[i] * 3.6}, 800, createjs.Ease.cubicInOut);
    break;
    case 1:
      createjs.Tween.get(arcArray[i])
        .wait(300)
        .to({endAngle : perseNumArray[i] * 3.6}, 800, createjs.Ease.cubicInOut);
    break;
    case 2:
      createjs.Tween.get(arcArray[i])
        .wait(600)
        .to({endAngle : perseNumArray[i] * 3.6}, 800, createjs.Ease.cubicInOut);
    break;

  }