HTMLとCSSのコピペでできる横棒グラフ

13分

グラフのイラスト

SHARE

棒グラフは、長方形の柱の長さがその値に比例するグラフで、データの数量がそのまま柱の高さとなって現れるため、データの大小を比較するのに向いています。

棒グラフに縦と横の2種類ありますが、横棒グラフは、文字通り数量を表す棒を横方向に配置したグラフです。

原則的にはカテゴリーを表す文字数が多い場合に使用しますが、日本語を横書きで記載した場合、縦棒グラフではラベルに多くの文字を書きにくい為、この横棒グラフが良く使われています。

今回は、HTMLとCSSのコピペでできる横棒グラフ2つと、jQueryを併用した1種類の合計3つについてご紹介します。

ラベルなしの棒グラフ

緑色の棒グラフの色は、.bar23::after{} の background: #2ecc71; の部分を変更することで、好きな色に変更できます。

ラベルがついていないグラフなので、それぞれの部分に色で分け識別しやすい必要があるので、使い勝手があまり良くはないかもしれません。

コードを表示する

HTML 

<div class="graph-cont">
  <div class="bar23 bar1"></div>
  <div class="bar23 bar2"></div>
  <div class="bar23 bar3"></div>
  <div class="bar23 bar4"></div>
</div>

CSS 

/* CSS ONLY */
.graph-cont{
  width: calc(100% - 40px);
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}
.bar23{
  height: 30px;
  max-width: 800px;
  margin: 0 auto 10px auto;
  line-height: 30px;
  font-size: 16px;
  color: white;
  padding: 0 0 0 10px;
  position: relative;
}

.bar23::before{
  content:'';
  width: 100%;
  position: absolute;
  left: 0;
  height: 30px;
  top: 0;
  z-index: 0;
  background: #ecf0f1;
}
.bar23::after{
  content: '';
  background: #2ecc71;
  height: 30px;
  transition: 0.7s;
  display: block;
  width: 100%;
  -webkit-animation: bar-before 1 1.8s;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
}
.bar1::after{
  max-width: 60%;
}
.bar2::after{
  max-width: 72%;
}
.bar3::after{
  max-width: 47%;
}
.bar4::after{
  max-width: 20%;
}
@-webkit-keyframes bar-before{
  0%{
    width: 0px;
  }
  100%{
    width: 100%;
  }
}

.how-cont{
  width: calc(100% - 40px);
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}
code {
  padding: 5px;
  background: #ecf0f1;
  display: block;
}
pre{
  padding: 0;
  margin: 0;
}

HTMLとCSSのみの棒グラフ

HTML のタグ data-percentage=”〜〜%” の部分を差し替えることで、グラフの％の表記が変更でき、@-webkit-keyframes show-bar-*** のwidth100%の数値の％を変更することで、バーの長さを変更することができます。

シンプルな造りなので、使いやすい造りです。

2020
2019
2018
2017

コードを表示する

HTML 

<section class="bar-graph bar-graph-horizontal bar-graph-one">
  <div class="bar-one">
    <span class="year">2020</span>
    <div class="bar" data-percentage="69.6%"></div>
  </div>
  <div class="bar-two">
    <span class="year">2019</span>
    <div class="bar" data-percentage="71%"></div>
  </div>
  <div class="bar-three">
    <span class="year">2018</span>
    <div class="bar" data-percentage="74.7%"></div>
  </div>
  <div class="bar-four">
    <span class="year">2017</span>
    <div class="bar" data-percentage="76.8%"></div>
  </div>
</section>

CSS 

/* 棒グラフ3 CSS Only */
.bar-graph .year {
  -webkit-animation: fade-in-text 2.2s 0.1s forwards;
  -moz-animation: fade-in-text 2.2s 0.1s forwards;
  animation: fade-in-text 2.2s 0.1s forwards;
  opacity: 0;
}

.bar-graph-horizontal {
  max-width: 100%;
}

.bar-graph-horizontal > div {
  float: left;
  margin-bottom: 8px;
  width: 100%;
}

.bar-graph-horizontal .year {
  float: left;
  margin-top: 18px;
  width: 50px;
}

.bar-graph-horizontal .bar {
  border-radius: 3px;
  height: 55px;
  float: left;
  overflow: hidden;
  position: relative;
  width: 0;
}

.bar-graph-one .bar::after {
  -webkit-animation: fade-in-text 2.2s 0.1s forwards;
  -moz-animation: fade-in-text 2.2s 0.1s forwards;
  animation: fade-in-text 2.2s 0.1s forwards;
  color: #fff;
  content: attr(data-percentage);
  font-weight: 700;
  position: absolute;
  right: 16px;
  top: 12px;
}

.bar-graph-one .bar-one .bar {
  background-color: #c8e4ff;
  -webkit-animation: show-bar-one 1.2s 0.1s forwards;
  -moz-animation: show-bar-one 1.2s 0.1s forwards;
  animation: show-bar-one 1.2s 0.1s forwards;
}

.bar-graph-one .bar-two .bar {
  background-color: #a9d8ff;
  -webkit-animation: show-bar-two 1.2s 0.2s forwards;
  -moz-animation: show-bar-two 1.2s 0.2s forwards;
  animation: show-bar-two 1.2s 0.2s forwards;
}

.bar-graph-one .bar-three .bar {
  background-color: #6bb6ff;
  -webkit-animation: show-bar-three 1.2s 0.3s forwards;
  -moz-animation: show-bar-three 1.2s 0.3s forwards;
  animation: show-bar-three 1.2s 0.3s forwards;
}

.bar-graph-one .bar-four .bar {
  background-color: #59b3fc;
  -webkit-animation: show-bar-four 1.2s 0.4s forwards;
  -moz-animation: show-bar-four 1.2s 0.4s forwards;
  animation: show-bar-four 1.2s 0.4s forwards;
}

/* Bar Graph Horizontal Animations */
@-webkit-keyframes show-bar-one {
  0% {
    width: 0;
  }
  100% {
    width: 69.6%;
  }
}

@-webkit-keyframes show-bar-two {
  0% {
    width: 0;
  }
  100% {
    width: 71%;
  }
}

@-webkit-keyframes show-bar-three {
  0% {
    width: 0;
  }
  100% {
    width: 74.7%;
  }
}

@-webkit-keyframes show-bar-four {
  0% {
    width: 0;
  }
  100% {
    width: 76.8%;
  }
}

@-webkit-keyframes fade-in-text {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

jQueryの棒グラフ

この棒グラフはHTMLとCSSに加えてjQueryで実装する棒グラフです。

jQueryなので、動きも出て見やすく更新もしやすい造りです。

HTML の data-value=”***” の数値を変えることで棒の長さを変えることが可能で、いじりやすい造りです。

棒グラフのタイトル
Interest 1
100
Interest 2
62
Interest 3
35
Interest 4
13
Interest 5
8
Interest 6
5
Interest 7
2

コードを表示する

HTML 

<div class="chart-wrap">
  <div class="chart-title">
    TITLE
  </div>
  <div id="dashboard-stats" class="chart bars-horizontal brand-primary">
    <div class="row">
      <span class="label">Interest 1</span>
      <div class="bar-wrap">
        <div class="bar" data-value="100"></div>
      </div>
      <span class="number">100</span>
    </div>
    <div class="row">
      <span class="label">Interest 2</span>
      <div class="bar-wrap">
        <div class="bar" data-value="62"></div>
      </div>
      <span class="number">62</span>
    </div>
    <div class="row">
      <span class="label">Interest 3</span>
      <div class="bar-wrap">
        <div class="bar" data-value="35"></div>
      </div>
      <span class="number">35</span>
    </div>
    <div class="row">
      <span class="label">Interest 4</span>
      <div class="bar-wrap">
        <div class="bar" data-value="13"></div>
      </div>
      <span class="number">13</span>
    </div>
    <div class="row">
      <span class="label">Interest 5</span>
      <div class="bar-wrap">
        <div class="bar" data-value="8"></div>
      </div>
      <span class="number">8</span>
    </div>
    <div class="row">
      <span class="label">Interest 6</span>
      <div class="bar-wrap">
        <div class="bar" data-value="5"></div>
      </div>
      <span class="number">5</span>
    </div>
    <div class="row">
      <span class="label">Interest 7</span>
      <div class="bar-wrap">
        <div class="bar" data-value="2"></div>
      </div>
      <span class="number">2</span>
    </div>
  </div>
</div>

CSS 

.chart-wrap {
  max-width: 900px;
  margin: 0 auto;
  padding: 10px;
  border: 1px solid #eeeeee;
}
.chart-wrap .chart-title {
  margin-bottom: 10px;
  font-size: 16px;
  text-align: center;
  text-transform: uppercase;
  margin-top: 5px;
}
.chart-wrap .row {
  position: relative;
  height: 26px;
  margin-bottom: 15px;
}
.chart-wrap .bar-wrap {
  position: relative;
  background: #d7dbde;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.chart-wrap .bar-wrap .bar {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: linear-gradient(45deg, #7fc3ff, #6bb6ff);
  transition: all 1s;
  transform: translateX(-100%);
}
.chart-wrap .bar-wrap .bar.in {
  transform: translateX(0%);
}
.chart-wrap ) .bar {
  transition: 1s 400ms;
}
.chart-wrap ) .bar {
  transition: 1s 600ms;
}
.chart-wrap ) .bar {
  transition: 1s 800ms;
}
.chart-wrap ) .bar {
  transition: 1s 1000ms;
}
.chart-wrap ) .bar {
  transition: 1s 1200ms;
}
.chart-wrap ) .bar {
  transition: 1s 1400ms;
}
.chart-wrap ) .bar {
  transition: 1s 1600ms;
}
.chart-wrap .label {
  position: absolute;
  top: 0;
  left: 0;
  padding-left: 10px;
  text-align: left;
  font-size: 12px;
  line-height: 26px;
  text-transform: uppercase;
  font-weight: bold;
  z-index: 10;
}
.chart-wrap .number {
  position: absolute;
  top: 0;
  right: 0;
  width: 35px;
  padding-right: 10px;
  font-size: 18px;
  line-height: 26px;
  font-weight: bold;
  text-align: right;
  z-index: 10;
}
@media screen and (min-width: 800px) {
  .chart-wrap .row {
    padding: 0 40px 0 160px;
  }
  .chart-wrap .label {
    text-align: right;
    padding-left: 10px;
  }
  .chart-wrap .number {
    text-align: left;
    padding-right: 0;
  }
  .chart-wrap .row {
    padding: 0 50px 0 100px;
}
}

@media screen and (max-width: 480px) {
.chart-wrap .number {
    width: 45px;
    padding-right: 5px;
}
}

jQuery 

(function($) {
  function generateBarGraph(wrapper) {
    // Set Up Values Array
    var values = [];

    // Get Values and save to Array
    $(wrapper + ' .bar').each(function(index, el) {
      values.push($(this).data('value'));
    });

    // Get Max Value From Array
    var max_value = Math.max.apply(Math, values);

    // Set width of bar to percent of max value
    $(wrapper + ' .bar').each(function(index, el) {
      var bar = $(this),
          value = bar.data('value'),
          percent = Math.ceil((value / max_value) * 100);

      // Set Width & Add Class
      bar.width(percent + '%');
      bar.addClass('in');
    });
  }

  // Generate the bar graph on window load...
  $(window).on('load', function(event) {
    generateBarGraph('#dashboard-stats');
  });
})(jQuery); // Fully reference jQuery after this point.

前の記事

インバウンドマーケティングのイラスト
インバウンド・マーケティングの基本とその特徴

次の記事

プラグインなしでページ内にPHPを読み込む方法
phpのショートコードのイラスト

関連記事

カテゴリーのイラスト

同じカテゴリの記事一覧

ボタンの影

まとめ記事

Article

About

Summary

OTHER

DUB DESiGNはデザインをテーマにしたメディアです。Webデザインに関するHow-toや、WordPressのスニペットなど、デザインの話を中心に、仕事を楽しむすべての方を対象に記事を配信しています。

＞＞ 詳しくはこちら