TableタグとCSSだけでグラフやチャートを簡単に実装できる「Charts.css」

         

CSS

TableタグとCSSだけでグラフやチャートを簡単に実装できる「Charts.css」

2021年03月28日 17:00 

TableタグとCSSだけでグラフやチャートを簡単に実装できる「Charts.css」

こんにちは!社員Kです。

本日は、HTMLのTableタグとCSSだけでグラフやチャートを簡単に実装できるCSSフレームワーク「Charts.css」のご紹介です。

関連記事



 

Chart.cssとは?

Charts.cssは、データをグラフやチャートで視覚化するための新しいオープンソースフレームワークです。
従来のJSチャートライブラリをCSSフレームワークに置き換えて簡単に利用することができます。

 

Charts.cssは最新のCSSフレームワークです。CSSユーティリティクラスを使用して、HTML要素をグラフとしてスタイル設定します。Chart.css

 

特徴

  • HTMLとCSSだけで簡単に実装できます
  • マークアップ内のデータを利用
  • 自由にカスタマイズ可能
  • オープンソース
  • レスポンシブ
  • 多種多様なタイプのチャートや便利なコンポーネントを利用できます

使い方

外部ファイルとして読み込む

下記のGitHubリポジトリにアクセスして、ダウンロードしてサーバーにアップしてください。

ChartsCSS – Download

 

CDNも提供されています

下記のどちらからお好きな方で読み込むことができます。

① jsdelivr から読み込む

② unpkg から読み込む



HTML/CSSクラスの記述方法

下記のような基本のTable構造のHTMLがあるとします。

 

Charts.cssを適用する

データをグラフとして表示するには、最初に.charts-cssクラスを<table>要素に追加する必要があります。

 

チャートタイプ

次に、グラフの種類の1つを選択し、単純なCSSクラスを使用してデータテーブルに適用します。
たとえば.bar、データを棒グラフとして表示するクラスを追加します。

一部、開発中のチャートタイプもあるようです。

 

コンポーネントクラス

Chart.cssでは、チャートの可視性を高めるために多くのユーティリティクラスを提供しています。
たとえば、マークアップを変更せずにデータの順序を逆にすることができたり、チャートにあらゆる種類の軸を追加できます。
また、データを説明するツールチップを追加することもできます。

クラスが予想より長くなり、読めなくなった場合は、クラスのグループ化を使用できます。

 

カスタムスタイリング

Chart.cssが提供する最大の利点は、CSSを使用して可視性をカスタマイズできることです。
<table>内の任意のHTML要素を選択して、独自のCSSルールを追加できます。

カスタムスタイルには、idまたはclassのいずれかを使用できます。

 

実装サンプル

このあたりを参考に実際に使ってみました。
ChartsCSS – ToolsTip

こんな感じで表示することが出来ました。

 

その他の実装サンプルはこちらから

ChartsCSS – Examples

 

チャートビルダーを利用

便利なツールも提供されています。

ChartsCSS – Builder

 

いかがでしたでしょうか?

難しいJavascriptのコードを書かなくてもHTMLとCSSだけで簡単にグラフやチャートを実装できる、「Chart.css」のご紹介でした。

 

 

関連記事

この記事を書いた人

アバター

社員K

福岡でWebプログラマー・フロントエンドエンジニアとして10年目。まだまだ勉強することが沢山あるなぁと最近良く思います。日本語には自信があります。すぐに効くダイエット情報募集中!