CSS3:縦の棒グラフを作る

goto_jp 4,260views 更新:2014年5月12日

サンプルはこちら。
http://codepen.io/KazuyoshiGoto/pen/zAtvG

See the Pen zAtvG by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen.

以前横に伸びるタイプも紹介しましたが、背景もCSS3でグリッド化するとグラフとして見やすくなるのでカスタマイズしてみました。

CSS

クラスごとに説明します。

背景部分

.barchart {
  position: relative;
  width: 220px;
  height: 250px;
  margin: 0 auto;
  border: solid 5px #ccc;
  background-image: linear-gradient( transparent 98%, rgba(#000, .2) 2%);
  background-size: 10%;
  background-repeat: repeat;
}

linear-gradientで線を引くだけの背景を作り、縦10%ごとのグリッドを作っています。

グラフ部分

[class*=date] {
  @include inline-block;
  position:absolute;
  bottom: 0;
  width: 60px;
  background: #ccc;
  @include animation(anime1 1s 1 ease);
}
.date1 {background: #0c9;left:10px}
.date2 {background: #09c;left:80px}
.date3 {background: #0cc;left:150px}

まずクラス名が「date」で始まるクラスに共通したスタイル設定をしています。
横に伸びるタイプと異なり、下から上に伸ばすには position:absolute して bottom:0 をかけ、基準値を枠の底にする必要があります。

date1~3には色と、absoluteしているため個別の位置を設定。

グラフ自体の長さはHTMLにインラインで記述することで動的に処理しやすくしています。

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません