2018年02月28日(水)

アニメーションする簡易的なバーチャート

• 0
• 1
• 5
• 11

Result

See the Pen simple bar chart with css by kachibito (@kachibito) on CodePen.

必要最低限のCSSで実装する、みたいな、お手軽チャートの実装例です。
displa:table;を使っています。

css

.chart {/*全体。display: table;でtable化しておく*/ 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 {/*vertical-align: bottom;で下揃えにし、アニメーションで上に伸びるように*/ position: relative; display: table-cell; vertical-align: bottom; height: 200px; } .chart span {/*バーのスタイル*/ ...