HTMLのtableにクラスを加えるだけで、グラフやチャートを簡単に実装できるCSSのフレームワーク -Charts.css

棒グラフや折れ線グラフ、どうやって実装していますか?
Charts.cssなら簡単です。データをtableタグで実装し、CSSのクラスをtableに加えるだけで横棒グラフ、棒線グラフ、折れ線グラフ、エリアグラフなどを簡単に実装できるCSSのフレームワークを紹介します。

HTMLは普通の表組みなのでアクセシブル、グラフやチャートはレスポンシブにも完全対応した優れものです。

グラフやチャートを簡単に実装できるCSSのフレームワーク -Charts.css

Charts.css
Charts.css -GitHub

Charts.cssの特徴

Charts.cssはtableで実装した表組みにシンプルなCSSのクラスを加えるだけで、さまざまなグラフやチャートを実装できるフレームワークです。カスタマイズも簡単で、ユーティリティのクラスも豊富に用意されています。

サイトのキャプチャ

Charts.css

Charts.cssの特徴
  • HTMLとCSSだけで実装
    セマンティックなHTMLタグを使用します。
  • アクセシブル
    グラフやチャートを実装するHTMLは、アクセシブルです。
  • カスタマイズ
    グラフやチャートは自由にスタイルできます。
  • レスポンシブ
    スマホ、タブレット、デスクトップのさまざまなスクリーンに対応。
  • バラエティ豊富
    グラフやチャートはさまざまなタイプが利用できます。
    パイチャート・ドーナツチャートにも近日対応予定。
  • オープンソース
    MITライセンスで、商用プロジェクトでも無料で利用できます。

Charts.cssのデモ

デモではCharts.cssで作成できるさまざまなグラフやチャートを楽しめます。

サイトのキャプチャ

横棒グラフのデモ

サイトのキャプチャ

棒線グラフのデモ

サイトのキャプチャ

エリアチャートのデモ

サイトのキャプチャ

折れ線グラフ

Charts.cssの使い方

Step 1: 外部ファイル

当CSSを外部ファイルとして記述します。

CDNでも提供されています。

Step 2: HTML

グラフやチャートに使用するデータは、tableタグで実装します。これにより、検索エンジンやスクリーンリーダーには生データが参照されます。

Step 3: classの付与

tableタグに.charts-cssを加え、使用するグラフやチャートの種類(.bar, .column, .lineなど)を加えます。

あとは、チャートの可視性を高めるために多くのユーティリティクラスが用意されています。詳しくは、下記のドキュメントをご覧ください。

サイトのキャプチャ

docs- Charts.css

簡単に作成できるようにオンラインツールも用意されています。

サイトのキャプチャ

チャート ビルダー

オプションをいろいろ試すことができ、下記のようにリアルタイムに確認できます。

サイトのキャプチャ

チャート ビルダー

sponsors

top of page

©2021 coliss