BLOG ブログ

> ブログ

こんにちは!WEBデザイナーのこたです。
今回はかなり実践的な話になります。
サイト制作で棒グラフや折れ線グラフ、円グラフを表示することってありますよね。
その際には画像で作ったり、JSとCSSを組み合わせて作ったりと、簡単にはいきません。
もっと簡単に表示できないかなと探したところ、ありました!!
それが「Charts.css」になります。
棒グラフや折れ線グラフ、円グラフを簡単に実装できるCSSのフレームワークになっています。

公式サイト・ダウンロードはこちら

Charts.css
Charts.css -GitHub

12種類のグラフやチャートがある


横棒グラフ、棒線グラフ、折れ線グラフ、エリアグラフなど12種類。
さらにカスタマイズで色の調整や、動きをつけられます。
レスポンシブにも完全対応した優れものです。

こんな感じ

See the Pen
YzNEypK
by こた@WEBデザイナー (@kota_webdesign)
on CodePen.

Charts.cssの使い方

Step1 外部ファイルを読み込む

「Charts.css」を外部ファイルとして記述します。
CDNもあるのですぐに実装したいならこちら

Step2 HTMLを記述

Charts.cssはtableで実装した表組みにシンプルなCSSのクラスを加えるだけです。

Step3 HTMLにクラスを付与する

tableタグに.charts-cssを加え、使用するグラフやチャートの種類(.bar, .column, .lineなど)を加えます。
細かい設定は公式サイトで確認し、カスタマイズしてください。

まとめ

Charts.cssなら簡単にグラフやチャートを実装できます。
コーポレートサイトやリクルートサイトなどにかなり使えるフレームワークなのでぜひ使用してみてください。