ままろぐ

棒グラフの描画方法です。
棒グラフはとても簡単。領域を区切って背景色をつけてあげれば良いのです。




前のエントリーの内容に折れ線グラフに重ねるので、CSSやタグの形は統一しました。

HTML
<div class="graph">
<dl class="axis">
<dt class="axis-y">m</dt>
<dd class="axis-y">
<ul><li><b>5.0</b></li><li><b>4.5</b></li><li><b>4.0</b></li><li><b>3.5</b></li><li><b>3.0</b></li><li><b>2.5</b></li><li><b>2.0</b></li>
<li><b>1.5</b></li><li><b>1.0</b></li><li><b>0.5</b></li></ul>
</dd>
<dt class="axis-x">days</dt>
<dd class="axis-x">
<ul><li><b>1</b></li><li><b>2</b></li><li><b>3</b></li><li><b>4</b></li><li><b>5</b></li><li><b>6</b></li><li><b>7</b></li><li><b>8</b></li><li><b>9</b></li><li><b>10</b></li><li><b>11</b></li><li class="finish"><b>12</b></li></ul>
</dd>
</dl>

<dl class="cssbargraph">
<dt>value 0</dt>
<dd><span class="M15">1.5</span></dd>
<dt>value 1</dt>
<dd><span class="Mnull">null</span></dd>
<dt>value 2</dt>
<dd><span class="M30">3.0</span></dd>
<dt>value 3</dt>
<dd><span class="M05">0.5</span></dd>
<dt>value 4</dt>
<dd><span class="M17">1.7</span></dd>
<dt>value 5</dt>
<dd><span class="M35">3.5</span></dd>
<dt>value 6</dt>
<dd><span class="M26">2.6</span></dd>
<dt>value 7</dt>
<dd><span class="M41">4.1</span></dd>
<dt>value 8</dt>
<dd><span class="M50">5.0</span></dd>
<dt>value 9</dt>
<dd><span class="M02">0.2</span></dd>
<dt>value 10</dt>
<dd><span class="M01">0.1</span></dd>
</dl>
</div>

CSS
/*軸*/
.axis {
margin: 11px;
padding: 10px 10px 10px 30px;
width: 458px; /*参考元からwidthを変更しています*/
height: 370px;
font-size: 12px;
border: 1px solid #ccc;
color: #666;
}
.axis dt {
margin: 0;
padding: 0;
}
.axis dd {
margin: 0;
padding: 0;
}
.axis ul {
margin: 0;
padding: 0;
list-style: none;
}
.axis li {
margin: 0;
padding: 0;
width: 20px;
}
dt.axis-y {
height: 20px;
}
dd.axis-y li {
width: 8px;
height: 32px;
border-top: 1px solid #666;
border-right: 1px solid #666;
}
dd.axis-y b {
width: 25px;
height: 20px;
text-align: right;
position: relative;
top: -5px;
left: -30px;
font-weight: normal;
display: block;
}
dt.axis-x {
float: right;
}
dd.axis-x {
margin: 0 0 0 8px;
}
dd.axis-x li {
width: 32px;
height: 8px;
float: left;
border-top: 1px solid #666;
border-right: 1px solid #666;
}
/* X軸の最後は値を表示しない */
dd.axis-x li.finish {
width: 32px;
height: 8px;
float: left;
text-indent: -8000px;
border-top: 1px solid #666;
border-right: 1px solid #FFF;
}
dd.axis-x b {
width: 32px;
text-align: center;
position: relative;
top: 12px;
left: 16px;
font-weight: normal;
display: block;
}

/*軸と重ねる*/
.cssbargraph {
margin: 10px;
position: relative;
top: -397px;
left: 61px;
}

/*グラフ*/
dl.cssbargraph dt, dl.cssbargraph dd {
margin: 0;
padding: 0;
}
dl.cssbargraph {
width:445px;
height:385px;
}
dl.cssbargraph dt{
display:none;
}
dl.cssbargraph dd{
margin-top: 26px;
position: relative;
width: 33px;
height: 330px;
float: left;
display: inline;
}
dl.cssbargraph span{
text-indent: -8000px;
position: absolute;
left 0px;
bottom: 0px;
top: 0 auto;
width: 23px;
display: block;
}
dl.cssbargraph dd span{
background-color: #666;
}

/* 棒グラフの長さ＆レベルラインの高さ */
.Mnull{height: 0px;}
.M00{height: 1px;}/*0level*/
.M01{height: 6.6px;}
.M02{height: 13.2px;}
.M03{height: 19.8px;}
.M04{height: 26.4px;}
.M05{height: 33px;}
.M06{height: 39.6px;}
.M07{height: 46.2px;}
.M08{height: 52.8px;}
.M09{height: 59.4px;}
.M10{height: 66px;}
.M11{height: 72.6px;}
.M12{height: 79.2px;}
.M13{height: 85.8px;}
.M14{height: 92.4px;}
.M15{height: 99px;}
.M16{height: 105.6px;}
.M17{height: 112.2px;}
.M18{height: 118.8px;}
.M19{height: 125.4px;}
.M20{height: 132px;}
.M21{height: 138.6px;}
.M22{height: 145.21px;}
.M23{height: 151.8px;}
.M24{height: 158.4px;}
.M25{height: 165px;}
.M26{height: 171.6px;}
.M27{height: 178.2px;}
.M28{height: 184.8px;}
.M29{height: 191.4px;}
.M30{height: 198px;}
.M31{height: 204.6px;}
.M32{height: 211.2px;}
.M33{height: 217.8px;}
.M34{height: 224.4px;}
.M35{height: 231px;}
.M36{height: 237.6px;}
.M38{height: 250.8px;}
.M39{height: 257.4px;}
.M40{height: 264px;}
.M41{height: 270.6px;}
.M42{height: 277.2px;}
.M43{height: 283.8px;}
.M44{height: 290.4px;}
.M45{height: 297px;}
.M46{height: 303.6px;}
.M47{height: 310.2px;}
.M48{height: 316.8px;}
.M49{height: 323.4px;}
.M50{height: 330px;}


これで棒グラフができるはずです。
データが存在しない場所も対応しています。

【グラフ例1　棒グラフ】

さて、これの上に折れ線グラフをのっけていきます。


まず問題になるのが折れ線グラフ用のY軸が必要です。
現在あるY軸を利用して、右側に配置できるようY軸を作ってあげましょう。
HTML
<dt class="axis-yR">%</dt>
<dd class="axis-yR">
<ul><li><b>100</b></li><li><b>90</b></li><li><b>80</b></li><li><b>70</b></li><li><b>60</b></li><li><b>50</b></li><li><b>40</b></li><li><b>30</b></li><li><b>20</b></li><li><b>10</b></li>
</dd>

CSS
dt.axis-yR {
height: 20px;
float: right;
}
dd.axis-yR {
position: relative;
left: -40px;
top: 20px;
float: right;
}
dd.axis-yR li {
width: 8px;
height: 32px;
border-top: 1px solid #666;
border-left: 1px solid #666;
}
dd.axis-yR b {
width: 25px;
height: 20px;
text-align: right;
position: relative;
top: -5px;
right: -5px;
font-weight: normal;
display: block;
}

更にこのまま件のグラフをコピペすると棒グラフの分だけ折れ線の位置がずれているはずです。
topとleftの数値を調整してあげます。

.csslinegraph {
margin: 10px;
position: relative;
top: -397px;/*折れ線グラフと重ねるため調整*/
left: 61px;/*折れ線グラフと重ねるため調整*/
}

これで棒グラフと折れ線グラフが重なって　…　ちょっとまって！？
グラフの下の部分、謎の空白がぽか～んとあいてませんか？

【グラフ例2　棒グラフと折れ線グラフを重ねる】

グラフ例を見てもらうと分かりますが、スクロールした先に文字が書いてありますよね？
でもこれ、ソースを見てもらうと分かりますが折れ線グラフのすぐ下に書いてあるんです。

これ、グラフを重ねるために使った「position: relative;」が原因なんです。
これによってグラフは重ねることができましたが、元々グラフがあった場所を保持されてしまいます。
これは見た目が悪い！

なのでグラフを表示している親要素を以下のようにします。
せっかくなのでグラフも囲ってみました。

div.graph {
margin: 0px;
border-width: 1px;
border-style: solid;
border-color: #666;
padding: 0px;
width: 520px;/*サイズを指定しましょう*/
height: 420px;/*以下同文*/
overflow: hidden;/*ここで空白を隠します*/
}

【グラフ例3　グラフ完成】

さあ、これで棒グラフ＋折れ線グラフが完成しました！

せっかくなので次のエントリーではこのグラフを見た目良くします♪