生没年グラフ作成ツール

テーブルタグと水平線タグを使って

　拓郎ソングの時に水平線を使って棒グラフを作ることをやってみたのですが、それなら棒の左側の位置も指定して、期間を示すグラフは作れないものか？と思って、 JavaScriptでプログラミングしてみました。

岩倉具視

1825

1883

福沢諭吉

1835

1901

伊藤博文

1841

1909

新渡戸稲造

1862

1933

夏目漱石

1867

1916

樋口一葉

1872

1896

野口英世

1876

1928

仕組みは、一行ずつを小さなテーブルにして、棒グラフの一つ左のセルと棒グラフの入っているセルの長さを指定することによって棒の左右の位置を調整しています。

岩倉具視

1825

1883

福沢諭吉

1835

1901

どうせやるなら色や大きさなども変えられた方が良いと思ったので、若干のデザイン変更が出来るようにしてあります。

入力データの例を載せてありますので、よろしかったら、斬新な色彩感覚のグラフをデザインしてみてくださいね。
グラフを保存したい場合は、グラフが表示されているWindowで、[表示]-[ソース]でHTMLのソースを表示してtest.html等という名前で保存してからご利用ください。

　でも、実際にこのツールで作ったグラフを使う時は、画面をキャプチャーしてGIFなどの画像ファイルに直してから使う方が便利そうです（笑）。

生没年グラフ作成ツール←Click Here!
（先週も書きましたが…いったい誰が使うんでしょう？）

2002.10.18

[HOME][とまて週報TOP]