JavaScript + Ajax 実践サンプル集

棒グラフ用CSS

説明補足説明コード分割コード関連書籍コメント投稿

このサンプルは、イメージとスタイルシートを使用して棒グラフを表示します。Basic Bar Graphは、CSSのみ使用して棒グラフを表示しています。Complex Bar Graphは、CSSとイメージを使用して複雑な棒グラフを表示しています。Vertical Bar Graphは、イメージ上に棒グラフを表示しています。

このサンプルを編集して試してみる

このサンプルで使用しているイメージです。イメージを右クリックしてダウンロードしてください。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>CSS for bar graphs</title>
  <link href="assets/css/barGraphs/StyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
  <div id="article-body">
    <h3>Basic Bar Graph</h3>
    <div class="graph">
      <strong class="bar" style="width: 54%;"><span>54%</span></strong>
    </div>
    <div class="graph">
      <strong class="bar" style="width: 8%;"><span>8%</span></strong>
    </div>
    
    <h3>Complex Bar Graph</h3>
    <dl>
      <dt>Love Life</dt>
      <dd>
        <div style="width: 25%;"><strong>25%</strong></div>        
      </dd> 
    </dl>
    
    <dl>   
      <dt>Education</dt>
      <dd>
        <div style="width: 55%;"><strong>55%</strong></div>
      </dd>
    </dl>
    
    <dl>
      <dt>War Craft 3 Rank</dt>
      <dd>
        <div style="width: 75%;"><strong>75%</strong></div>
      </dd>
    </dl>        
    
    <div class="clear">
    </div>
    <h3>Vertical Bar Graph</h3>
    <div id="vertgraph">
      <ul>
        <li class="critical" style="height: 150px;">22</li>
        <li class="high" style="height: 80px;">7</li>
        <li class="medium" style="height: 50px;">3</li>
        <li class="low" style="height: 90px;">8</li>
        <li class="info" style="height: 40px;">2</li>
      </ul>
    </div>
    <div class="clear">
    </div>
  </div>
</body>
</html>

CSS部HEAD部BODY部

ボックス内のスタイルシート(CSS)を外部ファイル(*.css)、またはHTMLドキュメントの<HEAD>セクションの<style>タグ内にコピー＆ペーストしてください。

            
StyleSheet.css

/* General */

.clear
{
  clear: both;
}

/* Basic Bar Graph */
.graph
{
  position: relative; /* IE is dumb */
  width: 200px;
  border: 1px solid #B1D632;
  padding: 2px;
  margin-bottom: .5em;
}
.graph .bar
{
  display: block;
  position: relative;
  background: #B1D632;
  text-align: center;
  color: #333;
  height: 2em;
  line-height: 2em;
}
.graph .bar span
{
  position: absolute;
  left: 1em;
}
/* This extra markup is necessary because IE doesn't want to follow the rules for overflow: visible */

/* Complex Bar Graph */
dl
{
  margin: 0;
  padding: 0;
}
dt
{
  position: relative; /* IE is dumb */
  clear: both;
  display: block;
  float: left;
  width: 104px;
  height: 20px;
  line-height: 20px;
  margin-right: 17px;
  font-size: .75em;
  text-align: right;
}
dd
{
  position: relative; /* IE is dumb */
  display: block;
  float: left;
  width: 197px;
  height: 20px;
  margin: 0 0 15px;
  background: url( "g_colorbar.jpg" );
}
* html dd
{
  float: none;
}
/* IE is dumb; Quick IE hack, apply favorite filter methods for 
    wider browser compatibility */

dd div
{
  position: relative;
  background: url( "g_colorbar2.jpg" );
  height: 20px;
  width: 75%;
  text-align: right;
}
dd div strong
{
  position: absolute;
  right: -5px;
  top: -2px;
  display: block;
  background: url( "g_marker.gif" );
  height: 24px;
  width: 9px;
  text-align: left;
  text-indent: -9999px;
  overflow: hidden;
}

/* Vertical Bar Graph */
#vertgraph
{
  width: 378px;
  height: 207px;
  position: relative;
  background: url(  "g_backbar.gif" ) no-repeat;
}
#vertgraph ul
{
  width: 378px;
  height: 207px;
  margin: 0;
  padding: 0;
}
#vertgraph ul li
{
  position: absolute;
  width: 28px;
  height: 160px;
  bottom: 34px;
  padding: 0 !important;
  margin: 0 !important;
  background: url(  "g_colorbar3.jpg" ) no-repeat !important;
  text-align: center;
  font-weight: bold;
  color: white;
  line-height: 2.5em;
}

#vertgraph li.critical
{
  left: 24px;
  background-position: 0px bottom !important;
}
#vertgraph li.high
{
  left: 101px;
  background-position: -28px bottom !important;
}
#vertgraph li.medium
{
  left: 176px;
  background-position: -56px bottom !important;
}
#vertgraph li.low
{
  left: 251px;
  background-position: -84px bottom !important;
}
#vertgraph li.info
{
  left: 327px;
  background-position: -112px bottom !important;
}

/* 
Note: The use of !important is to over write my site stlyesheets for these examples
*/

ボックス内のコードをHTMLドキュメントの<HEAD>セクションにコピー＆ペーストしてください。

            
<link href="assets/css/barGraphs/StyleSheet.css" rel="stylesheet" type="text/css" />

ボックス内のコードをHTMLドキュメントの<BODY>セクションにコピー＆ペーストしてください。

            
<div id="article-body">   
    <h3>Basic Bar Graph</h3>   
    <div class="graph">   
      <strong class="bar" style="width: 54%;"><span>54%</span></strong>   
    </div>   
    <div class="graph">   
      <strong class="bar" style="width: 8%;"><span>8%</span></strong>   
    </div>   
       
    <h3>Complex Bar Graph</h3>   
    <dl>   
      <dt>Love Life</dt>   
      <dd>   
        <div style="width: 25%;"><strong>25%</strong></div>           
      </dd>    
    </dl>   
       
    <dl>      
      <dt>Education</dt>   
      <dd>   
        <div style="width: 55%;"><strong>55%</strong></div>   
      </dd>   
    </dl>   
       
    <dl>   
      <dt>War Craft 3 Rank</dt>   
      <dd>   
        <div style="width: 75%;"><strong>75%</strong></div>   
      </dd>   
    </dl>           
       
    <div class="clear">   
    </div>   
    <h3>Vertical Bar Graph</h3>   
    <div id="vertgraph">   
      <ul>   
        <li class="critical" style="height: 150px;">22</li>   
        <li class="high" style="height: 80px;">7</li>   
        <li class="medium" style="height: 50px;">3</li>   
        <li class="low" style="height: 90px;">8</li>   
        <li class="info" style="height: 40px;">2</li>   
      </ul>   
    </div>   
    <div class="clear">   
    </div>   
</div>

コメント・提案の投稿！

名前
メール
件名
本文

JavaScript + Ajax 実践サンプル集 (1496本以上)　◇編集して実行可能◇

jQueryを使い倒せ!　jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... jQueryテンプレート42選!

棒グラフ用CSS

JavaScript + Ajax 実践サンプル集 (1496本以上) ◇編集して実行可能◇

jQueryを使い倒せ! jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... jQueryテンプレート42選!

棒グラフ用CSS

JavaScript + Ajax 実践サンプル集 (1496本以上)　◇編集して実行可能◇

jQueryを使い倒せ!　jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... jQueryテンプレート42選!