ホームページ作成

【ホームページ作成】棒グラフを作りたい

画像の表示・活用 (HTML,CSS,JavaScript)

更新日：2004年02月06日

棒グラフを作りたい

西村文宏

棒グラフを作ってみましょう。数値で何かを表す際、グラフがあると見やすいですね。表計算ソフトで作成したグラフを画像にするのは面倒ですし、修正が大変です。HTMLで手軽にできる棒グラフの作成方法をご紹介。

棒グラフを作りたい

数値だけよりもグラフがあった方が分かりやすい資料というのは、たくさんありますね。そこで、Web上で棒グラフを実現してみましょう。
表計算ソフトなどのグラフをキャプチャして画像にするよりも、HTMLで作っておく方が、書き換え・書き足しが簡単で便利です。

今回ご紹介する方法で作ることのできる棒グラフの例：

時間別アクセス数

00～02時：	1028
02～04時：	427
04～06時：	78
06～08時：	56
09～10時：	258
10～12時：	297
12～14時：	527
14～16時：	494
16～18時：	731
18～20時：	604
20～22時：	621
22～24時：	987

使用OS

Windows XP：	42%
Windows 2000：	13%
Windows Me：	8%
Windows 98：	12%
Windows 95：	2%
Mac OS X：	6%
Mac OS 9：	3%
UNIX：	12%
Other：	2%

棒グラフが何本でも画像は1つ

さて、上記のグラフは、棒の部分に画像を使用しています。ただし、使用している画像は、それぞれのグラフにつき1つずつ、次の2つだけです。

この画像で、自由な長さで何本でも棒グラフを描けます。
どうやって作成しているのでしょうか。次のページから具体的にご紹介致します。

その方法は、次のページで！ →

マネしたくなるアイデア住宅

住まいには、人の個性がよく現れるもの。同じ空間をどのように使うかで、雰囲気も、快適さも大きく変わってくる。ここでは、「建築家と家を建てる」ガイドの川畑博哉氏が厳選した10軒を紹介し、建築家それぞれのこだわりのポイントを紹介しよう。建築のプロたちが考え出した、マネしたくなるアイデアが満載！さぁ、いますぐチェック！