折れ線グラフを描く

canvasで折れ線グラフを描くにはjavascriptを使わなければならん、素人には無理だ。簡単にグラフの描けるスクリプトが配布されてたりしますが、使い方がわからん。
ということで直感的にグラフを描けるようなページを作った。出来たグラフのソースコードを書き出す事ができます。書き出したコードを貼付ければWebページにグラフを描くことが出来ます。グラフをpng画像で書き出しもできます。作成したグラフの画像とソースコードは商用利用可能です。クレジット表記も不要です。ご自由にお使いください。


全体(canvas)の大きさ

縦幅横幅余白

背景・枠


背景色枠線幅枠線色
全体
グラフ部分

タイトル

題名表示幅字サイズ書体フォントカラー

軸ラベル


軸ラベル表示幅字サイズ書体フォントカラー
縦軸
横軸

目盛


最小最大目盛間隔表示幅字サイズ書体フォントカラー目盛種類線幅線色
縦軸
横軸

凡例

字サイズ書体フォントカラー余白

データ

線幅線色マーカー凡例名x値y値

Canvas書き出しオプション

canvasのidコメント表示window.onload

注意

canvasのidは他の要素のidと同じにならないように設定して下さい。
window.onloadを使用するとscriptタグをヘッダー等に移動出来ます。しかし同一ページにCanvasグラフを2個載せる場合には、
 window.onload = start; function start(){drawgraph1("graph1");drawgraph2("graph2");}
このように1行にまとめて下さい。
「ソースコード書き出し保存」と「画像で保存」はChrome以外では機能しない場合があります。
ソースコードはわかりやすさと応用性を重視したため長くなっていますので適宜短く改良して下さい。

ツイート
2018/1/30