Canvasで棒グラフ、折れ線グラフ、円グラフをつくる
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)を決めることができます。
サンプル
コード