縦向きの棒グラフも作りたい!
前回、横向きの棒グラフの作成方法をご紹介致しました。 予想以上の反響でしたので、今回は、よりグラフらしい「縦向き」の棒グラフの作成方法をご紹介致しましょう。
今回の記事は、前回の記事を読まれていることを前提にしている箇所がありますので、 前回の記事「棒グラフを作りたい」をまだ読まれていない方は、前回の記事から先にどうぞ。
また、「棒グラフ用の画像素材」というのがあまりなさそうでしたので、いくつか用意しました。最終ページで公開していますので、ご自由にダウンロードしてご活用下さい。(縦向き版・横向き版の両方を用意しています。)
やっぱり棒グラフは縦向きでないと
HTMLは横書きが基本なので、グラフも横向きの方が作りやすいのですが、世の中にある棒グラフは、縦向きの方が多そうですね。 というわけで、縦向きの棒グラフを作ってみましょう。
横向きと縦向きとを比較すれば、横向きの方が簡単です。しかし、それは比較の問題であって、実際にはどちらも簡単にできます。 ぜひ、挑戦してみて下さい。
今回ご紹介する方法で作ることのできる棒グラフの例:
|
|
|
棒グラフが何本でも画像は1つ
さて、前回の記事「棒グラフを作りたい」と同様に、上記のグラフは「棒」の部分に、次のような画像を使用しています。
1 | 2 | 3 |
使用しているのは、それぞれのグラフにつき1つの画像だけです。それをHTMLで工夫して棒グラフに見せているわけです。
では、どうやって縦向きの棒グラフを実現しているのか、次のページから具体的に見ていきましょう。