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

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

棒グラフ

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

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

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

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)を変えられる。

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

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