はしくれエンジニアもどきのメモ

情報系技術・哲学・デザインなどの勉強メモ・備忘録です。

Canvasで棒グラフ、折れ線グラフ、円グラフをつくる

Canvasで棒グラフ、折れ線グラフ、円グラフをつくる

D3.js を使う前の練習ということで、Canvas で棒グラフ、折れ線グラフ、円グラフを作ってみたのでメモ。 なお、目盛りはついてないです。。

棒グラフ

barGraph(canvas_obj, datas, stroke_opts, fill_opts) 関数で棒グラフを描画している。

stroke_opts 引数で枠線の幅(width)と色(color)を変更できるようにしています。。

fill_opts 引数では、棒の色(color)を変更できるようにしています

サンプル

codepen.io

コード

Canvas上で棒グラフ

折れ線グラフ

function lineGraph(canvas_obj, datas, line_opts, dot_opts, text_opts) 関数で折れ線グラフを描画している。

line_opts 引数で、折れ線の色(color)と太さ(width)を変えられる。

dot_opts 引数では、点の色(color)と大きさ(radius)を変えられる。

text_opts 引数では、値の色(color)、フォント(font)、テキストAlign(textAlign)とテキストのベースライン(textBaseline)を変えられる。

サンプル

codepen.io

コード

Canvas上で折れ線グラフ

円グラフ

pieChart(canvas_obj, datas, opts) 関数を呼んで円グラフを描画している。

opts 引数でCanvas上の円グラフの位置(center_x, center_y)を指定し、大きさ(半径r)を決めることができます。

サンプル

codepen.io

コード

Canvas上で円グラフ