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

もっと棒グラフらしく 縦向き棒グラフを作りたい(2ページ目)

棒グラフといえば、やはり横向きより縦向き。前回の横向き棒グラフに続いて、今回は、縦向き棒グラフの簡単な作成方法をご紹介致します。(棒グラフ用に使える画像素材も用意しました。ご自由にご活用下さい。)

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

棒は画像、長さはHTMLで指定

1 2 3

前回もご紹介しましたが、念のため今回もご紹介しておきます。
棒の部分に右の画像を使用しています。これで、どうやって棒グラフを作成しているのでしょうか?

答えは簡単で、HTMLを使って、画像の高さを変化させているのです。

HTMLで、画像を表示させる際には、img要素(<img>タグ)を用いますね。
例えば、次のように記述します。

<img src="graph.gif" width="10" height="***">

上記の *** の部分に数値を入れることで、その画像の高さを変化させることができます。(数値の単位は「ピクセル」)
※「graph.gif」は画像ファイル名、「width="10"」の部分は横幅(10ピクセル)です。使用する画像ファイル名、表示したい横幅に合わせて書き換えて下さい。

例えば、

<img src="graph.gif" width="10" height="125">

……と記述すれば、高さ 125ピクセルで表示できます。

このように、高さの数値を変えて、必要分だけ列挙すれば、縦向き棒グラフになるわけですね。

ここまでは、前回の復習のようなものです。
さて、では、どうやって列挙すれば、縦向き棒グラフになるでしょうか?

画像をそのまま列挙

試しに、棒グラフ画像をそのまま列挙してみましょう。

<img src="graph.gif" width="10" height="50">
<img src="graph.gif" width="10" height="42">
<img src="graph.gif" width="10" height="47">

すると、次のように表示されます。

500 472 411

確かに、棒グラフに見えますね。 これで何も問題ないように見えます。
もっとたくさん列挙すると、次のような感じになります。

500 472 411 500 472 411 500 472 411

ただ棒を表示するだけで良いなら、これで終わりなのですが、やはりそういうわけにはいきませんね。
各グラフが何を表しているのかラベルが必要でしょう。
例えば、次のような感じです。

1457 1249 1111 1327 1326 1455 1504

各棒の下側に曜日を加えてみました。

画像の下に文字を表示

このように、グラフの下に文字を表示する必要がありますね。
ここが、横向きの棒グラフと異なる点です。

横向き棒グラフでは、各棒の左側に文字を表示すれば良かったので、ただ、img要素(<img>タグ)の前に文字を書けば問題ありませんでした。しかし、縦向き棒グラフでは、各棒の下側に文字を表示させなければなりません。
さて、これはどうやって実現すれば良いでしょうか?

それでは、次のページへ! →


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

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

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