読者です 読者をやめる 読者になる 読者になる

SCSSだけで棒グラフを生成する

仕事の関係で棒グラフを作成することになったので、
できるだけSCSSだけで書こうとしたらできちゃいました
※PDF用のSCSSを書いてるので単位がmmです

作成したグラフはこちら。

f:id:K396_109:20150726141645p:plain

数値もjavascript(coffeescript)を使わずに表示してみました

haml

.bar_graph
  .graph_title ここにグラフタイトル
  .graph_data.split_5
    .graph_data__item{:completion => 80}
    .graph_data__item{:completion => 65}
    .graph_data__item{:completion => 33}
    .graph_data__item{:completion => 48}
    .graph_data__item{:completion => 85}

completionの値を取得してきてheightを決めます

SCSS

まず全体をざくっと。

// .bar_graph //////////////////////////////////////
@for $i from 3 through 6{
  .split_#{$i}.graph_data > .graph_data__item{
    position: relative;
    width: 100% / $i; height: 45mm;  // heightは自分で決めてね☆
    border-right: solid 1mm #fff;
    float: left;
    &:last-of-type{
      border: none;
    }
  }
}

@for $i from 1 through 100{
  $completion: "'" + $i + "'";
  $parcent   : ""  + $i + "%";
  .graph_data__item[completion = #{$completion}]:before{
    position: absolute;
    width: 100%; height: 0% + $i;
    bottom: 0; left: 0;
    content: '';
  }
  .graph_data__item[completion = #{$completion}]:after{
    position: absolute;
    width: 100%;
    bottom: 3mm;
    text-align: center;
    content: $parcent;
    color: #fff;
  }
}

それでは説明。

.graph_data.split_5の.split_5の部分

for文を回して、hamlで指定した数で分割しています
(今回は3つから6つの間と限定してるよ!)

@for $i from 3 through 6{
  .split_#{$i}.graph_data > .graph_data__item{
    position: relative;
    width: 100% / $i; height: 45mm;  // heightは自分で決めてね☆
    border-right: solid 1mm #fff;
    float: left;
    &:last-of-type{
      border: none;
    }
  }
}

数値を表記・グラフの高さを指定する

最低値: 1 最高値: 100 でfor文を回す
completionの値になったときに勝手にプロバティを読み込んでいってくれます

@for $i from 1 through 100{
  $completion: "'" + $i + "'";
  $parcent   : ""  + $i + "%";
  .graph_data__item[completion = #{$completion}]:before{
    position: absolute;
    width: 100%; height: 0% + $i;
    bottom: 0; left: 0;
    content: '';
  }
  .graph_data__item[completion = #{$completion}]:after{
    position: absolute;
    width: 100%;
    bottom: 3mm;
    text-align: center;
    content: $parcent;
    color: #fff;
  }
}

$completonを指定しているのは文字列として数値を取得したいから
例えば:
 .graph_data__item[completion = #{$completion}]:before の
  #{$completion} を #{$i} とかにするとエラー吐かれる


height: 0% + $i は数値として指定したいので $i を使います

content: $parcent は文字列として指定したいので$parcentを使います
content: $i + '%'; や content: $completion + '%';
で指定しようとしたらエラーが出ます
(多分 『 + '%' 』が気に入らないんだろう…)



思いついたら誰でもできる簡単なコードでした
他になにか良い方法あればナレッジシェアお願いします!