【javascript,css】svgで複数の円グラフアニメーション

カスタムデータ属性に入れた数値をもとにアニメーションする円グラフを作成したときのメモ

円グラフのソースコード

とりあえず円グラフ2個用意した

<style>
.pie_chart{
  transform:rotate(-90deg);/*頂点から始まるように調整*/
}
circle{
  fill:transparent;/*塗り*/
  stroke-width:100;/*線の幅*/
}
</style>

<svg class="pie_chart" width="400" height="400" data-num="20">
  <circle style="animation:circle1 1s forwards;" cx="200" cy="200" r="100" />
</svg>
<svg class="pie_chart" width="400" height="400" data-num="60">
  <circle style="animation:circle2 1s forwards;" cx="200" cy="200" r="100" />
</svg>

<script>
 function circle() {
    var css, rules, value;

    // styleタグを作成
    css = document.createElement('style');
    css.media = 'screen';
    css.type = 'text/css';

    var i = 1;
    const list = document.querySelectorAll('svg');
    var arrayList = [].slice.call(list);

    arrayList.forEach(function (val, index, array) {
      // パーセントの計算
      var num = val.dataset.num * 12.56;

      value = '@keyframes circle' + i + '{' + [
        '0%{stroke-dasharray:0 1256;stroke: black}',
        '100%{stroke-dasharray:' + num + ' 1256;stroke: black}'
      ].join(' ') + '}';

      // ルールをstyleタグに追加
      rules = document.createTextNode([value].join('n'));
      css.appendChild(rules);
      i++;
    });

    // head内に作成
    document.getElementsByTagName('head')[0].appendChild(css);
  }
  circle();
</script>

data-num…○○%
cx="200" cy="200"…配置場所(真ん中寄席)
r="100"…半円の長さ
1256…円周の長さ
12.56…1%の数値

塗りで表示じゃなくて線で表示してるからstroke-width:100;を操作すれば太さは調整できる

cssアニメーションを作成する@keyframesにカスタムデータ属性の数値を突っ込んでjavascriptのほうで作成して追加してる

参考

JavaScriptでCSSアニメーションの@keyframesを使う

cssとsvgで、円グラフをモーショングラフィックス風に見せる方法