ホームページ作成/画像の表示・活用 (HTML,CSS,JavaScript)

棒グラフを作りたい

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

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

棒グラフを作りたい

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

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

時間別アクセス数
00~02時: 1028 1028
02~04時: 427 876
04~06時: 78 322
06~08時: 56 56
09~10時: 258 258
10~12時: 297 297
12~14時: 527 527
14~16時: 494 494
16~18時: 731 731
18~20時: 604 604
20~22時: 621 621
22~24時: 987 987

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

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

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

1:
2:

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

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

  • 1
  • 2
  • 3
  • 次のページへ

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

    All About公式SNS
    日々の生活や仕事を楽しむための情報を毎日お届けします。
    公式SNS一覧
    © All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます