折れ線グラフを描く
canvasで折れ線グラフを描くにはjavascriptを使わなければならん、素人には無理だ。簡単にグラフの描けるスクリプトが配布されてたりしますが、使い方がわからん。
ということで直感的にグラフを描けるようなページを作った。出来たグラフのソースコードを書き出す事ができます。書き出したコードを貼付ければWebページにグラフを描くことが出来ます。グラフをpng画像で書き出しもできます。作成したグラフの画像とソースコードは商用利用可能です。クレジット表記も不要です。ご自由にお使いください。
全体(canvas)の大きさ
背景・枠
タイトル
軸ラベル
目盛
凡例
データ
Canvas書き出しオプション
注意
canvasのidは他の要素のidと同じにならないように設定して下さい。
window.onloadを使用するとscriptタグをヘッダー等に移動出来ます。しかし同一ページにCanvasグラフを2個載せる場合には、
window.onload = start; function start(){drawgraph1("graph1");drawgraph2("graph2");}
このように1行にまとめて下さい。
「ソースコード書き出し保存」と「画像で保存」はChrome以外では機能しない場合があります。
ソースコードはわかりやすさと応用性を重視したため長くなっていますので適宜短く改良して下さい。
2018/1/30