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

もっと棒グラフらしく 縦向き棒グラフを作りたい

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

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

縦向きの棒グラフも作りたい!

前回、横向きの棒グラフの作成方法をご紹介致しました。 予想以上の反響でしたので、今回は、よりグラフらしい「縦向き」の棒グラフの作成方法をご紹介致しましょう。

今回の記事は、前回の記事を読まれていることを前提にしている箇所がありますので、 前回の記事「棒グラフを作りたい」をまだ読まれていない方は、前回の記事から先にどうぞ。

また、「棒グラフ用の画像素材」というのがあまりなさそうでしたので、いくつか用意しました。最終ページで公開していますので、ご自由にダウンロードしてご活用下さい。(縦向き版・横向き版の両方を用意しています。)

やっぱり棒グラフは縦向きでないと

HTMLは横書きが基本なので、グラフも横向きの方が作りやすいのですが、世の中にある棒グラフは、縦向きの方が多そうですね。 というわけで、縦向きの棒グラフを作ってみましょう。
横向きと縦向きとを比較すれば、横向きの方が簡単です。しかし、それは比較の問題であって、実際にはどちらも簡単にできます。 ぜひ、挑戦してみて下さい。

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

時間別アクセス数
1500 1420 1180 720 642 344 442 630 745 968 921 845 1240 980 724 1010 884 947 1345 1200 1117 1442 1428 1645
00 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23

時間別アクセス数
1500 1420 1180 720 642 344 442 630 745 968 921 845 1240 980 724 1010 884 947 1345 1200 1117 1442 1428 1645
00 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23

時間別アクセス数
1500 1420 1180 720 642 344 442 630 745 968 921 845 1240 980 724 1010 884 947 1345 1200 1117 1442 1428 1645
00 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23

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

さて、前回の記事「棒グラフを作りたい」と同様に、上記のグラフは「棒」の部分に、次のような画像を使用しています。

1 2 3

使用しているのは、それぞれのグラフにつき1つの画像だけです。それをHTMLで工夫して棒グラフに見せているわけです。

では、どうやって縦向きの棒グラフを実現しているのか、次のページから具体的に見ていきましょう。

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


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

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

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