アニメーションする簡易的なバーチャート
Result
必要最低限のCSSで実装する、みたいな、お手軽チャートの実装例です。
displa:table;を使っています。
css
.chart {
display: table;
table-layout: fixed;
width: 70%;
max-width: 700px;
height: 200px;
margin: 0 auto;
background-size: 100% 50px;
background-position: left top;
}
.chart li {
position: relative;
display: table-cell;
vertical-align: bottom;
height: 200px;
}
.chart span {
margin: 0 1em;
display: block;
background: rgba(0, 146, 255, 0.75);
animation: draw 1s ease-in-out;
}
.chart span:before {
position: absolute;
left: 0;
right: 0;
top: 100%;
padding: 5px 1em 0;
display: block;
text-align: center;
content: attr(title);
word-wrap: break-word;
}
@keyframes draw {
0% {
height: 0;
}
}
|
html
<ul class="chart">
<li>
<span style="height:5%" title="ActionScript"></span>
</li>
<li>
<span style="height:70%" title="JavaScript"></span>
</li>
<li>
<span style="height:50%" title="CoffeScript"></span>
</li>
<li>
<span style="height:15%" title="HTML"></span>
</li>
</ul>
|
via
simple bar chart with css
