画像を使用して、更新しやすいグラフが紹介されていました。
画像無しで、作成しました、画像使う場合はbackgroundの画像を設定します。
画像はカラーと白黒のものを用意します。
下のサイトも参考になります
Apples To Oranges – San Francisco Bay Area Visual and Experience Design Studio
<dl> <dt>A</dt> <dd> <div style="width:25%;"><strong>25%</strong></div> </dd> <dt>B</dt> <dd> <div style="width:55%;"><strong>55%</strong></div> </dd> <dt>C</dt> <dd> <div style="width:75%;"><strong>75%</strong></div> </dd> </dl>
dt{
clear: both;
float: left;
width: 110px;
padding-top: 80px;
line-height: 20px;
margin-right: 17px;
text-align: right;
font-weight: bold;
}
dd{
float: left;
width: 472px;
height: 135px;
margin: 0 0 15px;
background: #eee;
border: 1px solid #ccc;
}
dd div{
position: relative;
background: #999;
height: 135px;
}
dd div strong{
position: absolute;
right: -50px;
display: block;
border-left: 1px solid #000;
height: 12px;
width: 45px;
padding: 120px 0 3px 5px;
text-align: left;
font-size: 80%;
}