Vue.js Canvasで円グラフ

D3.jsを使えという声がありそうですが、
Canvasで円グラフをつくってみました。

See the Pen Vue.js Pie canvas by AsaToBan (@AsaToBan) on CodePen.

今回はgraphicの描画にpixi.jsを使っています。

ポイント : watchを利用する
canvasタグの描画にv-forをつかって
算出プロパティを定義できないためwatchをつかって算出プロパティを監視します。

  computed : {
    items(){
      return this.$store.state.piedata;
    }
  },
  watch:{
    items:{
      handler(){
         this.draw();
      },
      deep:true
    }
  },

この様にwatchを利用しstoreに変更があった場合に
描画を走らせるようにしています。
watchはデフォルトでは深いオブジェクトの中までは監視しないので

deep:true

こちらの記述が必要になるようです。

ポイント : マスクをかける
canvasだとそれぞれを円弧を重ねるとガビガビなってしまった
力技ですが全体をちょっと小さめの円でマスクしてます。

let mask = new PIXI.Graphics();
      mask.beginFill(0x000000);
      mask.drawCircle(x1,y1,r*0.95,false);
      mask.endFill();
      stage.addChild(mask);
      sp.mask = mask;
      wp.mask = mask;

感想:
SVGのpathと違って直感的に作成することができました。