CSSで棒グラフを作る

すべての可視化に重いチャートライブラリが必要なわけではありません。多くのダッシュボードでは、スタイルを付けた数個の div だけで、くっきりとして表示が速く、完全に自分でコントロールできる棒グラフが作れます。

このレッスンでは、素のHTMLとTailwindだけで縦の棒グラフを作ります。各バーは値に応じた高さを持つ色付きの div にすぎず、凡例が色とその意味を結び付けます。

アナリストにとって、このテクニックは宝物です。依存ライブラリなしで、きれいなチャートをどんなレポートにも組み込めますし、すべてのピクセルがデータにどう対応しているかを正確に理解できます。さあ、バーを描きましょう。