棒グラフをcssとjsで作る　使えるテンプレート　

2021年10月29日 2021年11月22日

美穂応利

LPなどでグラフを使用する場合、画像で制作した方が見せ方はキレイですが、更新頻度の高いものはcssで作成されたグラフ作成がおすすめです。

注意する点として各ブラウザでの見え方を確認する必要があります。

IEの2つ前のバージョンだと表示されない、スマホ画面だと崩れるなど問題が出てきますので必ず確認の上使用してください。

Googleチャート風グラフ

See the Pen <a href="https://codepen.io/webhacck/pen/pbJmRy"> GoogleChartsサンプル</a> by CodeSample (<a href="https://codepen.io/webhacck">@webhacck</a>) on <a href="https://codepen.io">CodePen</a>.

棒グラフ内に文字

See the Pen <a href="https://codepen.io/3aworks/pen/ONOggQ"> D3.js 基礎的な棒グラフの描画</a> by 3a works (<a href="https://codepen.io/3aworks">@3aworks</a>) on <a href="https://codepen.io">CodePen</a>.

棒グラフの上にアイコン

See the Pen <a href="https://codepen.io/Pizzi/pen/YrNppm"> Vue JS | Bar Chart 1.0</a> by Andrea Pizzigalli (<a href="https://codepen.io/Pizzi">@Pizzi</a>) on <a href="https://codepen.io">CodePen</a>.

3つの項目のグラフ　アニメーション

See the Pen <a href="https://codepen.io/guzmonne/pen/ZBamwb"> ChartJS Stacked Bar Chart</a> by Guzman Monne (<a href="https://codepen.io/guzmonne">@guzmonne</a>) on <a href="https://codepen.io">CodePen</a>.

横向きの棒グラフ　アニメーション

See the Pen <a href="https://codepen.io/richardramsay/pen/ZKmQJv"> Horizontal Stacked Bar Chart</a> by Richard Ramsay (<a href="https://codepen.io/richardramsay">@richardramsay</a>) on <a href="https://codepen.io">CodePen</a>.

立体感のあるグラフ

See the Pen <a href="https://codepen.io/tadaima/pen/evJBYV"> Bars Chart</a> by Tadaima (<a href="https://codepen.io/tadaima">@tadaima</a>) on <a href="https://codepen.io">CodePen</a>.

この記事を書いた人