canvasで作るドーナツグラフと円グラフ

canvasでドーナツグラフと円グラフを作りました。
複数必要だったので、何個も置けるようにしました。

See the Pen 180930_canvasで作るドーナツグラフと円グラフ by nekuta (@nekuta) on CodePen.

html

scss

javascript

canvasで円グラフを作る

canvasで円グラフを作るのはこちらのサイトさんを参考にしました。というよりほぼコピペです。

Canvasで円グラフを描く方法 | syncer
https://lab.syncer.jp/Web/JavaScript/Canvas/12/

複数あるのでcanvasにそれぞれidを振る

match_graphというclassを持つものを探してその個数分forで回しています。
そこにsetAttributeでそれぞれidを振っていきます。

参考サイト

Canvasで円グラフを描く方法 | syncer
https://lab.syncer.jp/Web/JavaScript/Canvas/12/

  • コーダーのための計算機