HTMLのtableにクラスを加えるだけで、グラフやチャートを簡単に実装できるCSSのフレームワーク -Charts.css
Post on:2021年3月22日
sponsors
棒グラフや折れ線グラフ、どうやって実装していますか？
Charts.cssなら簡単です。データをtableタグで実装し、CSSのクラスをtableに加えるだけで横棒グラフ、棒線グラフ、折れ線グラフ、エリアグラフなどを簡単に実装できるCSSのフレームワークを紹介します。
HTMLは普通の表組みなのでアクセシブル、グラフやチャートはレスポンシブにも完全対応した優れものです。
Charts.cssの特徴
Charts.cssはtableで実装した表組みにシンプルなCSSのクラスを加えるだけで、さまざまなグラフやチャートを実装できるフレームワークです。カスタマイズも簡単で、ユーティリティのクラスも豊富に用意されています。
-
- HTMLとCSSだけで実装
- セマンティックなHTMLタグを使用します。
-
- アクセシブル
- グラフやチャートを実装するHTMLは、アクセシブルです。
-
- カスタマイズ
- グラフやチャートは自由にスタイルできます。
-
- レスポンシブ
- スマホ、タブレット、デスクトップのさまざまなスクリーンに対応。
-
- バラエティ豊富
- グラフやチャートはさまざまなタイプが利用できます。
パイチャート・ドーナツチャートにも近日対応予定。
-
- オープンソース
- MITライセンスで、商用プロジェクトでも無料で利用できます。
Charts.cssのデモ
デモではCharts.cssで作成できるさまざまなグラフやチャートを楽しめます。
Charts.cssの使い方
Step 1: 外部ファイル
当CSSを外部ファイルとして記述します。
|
1 |
<link rel="stylesheet" href="charts.min.css"> |
CDNでも提供されています。
|
1 |
<link rel="stylesheet" href="https://unpkg.com/charts.css/dist/charts.min.css"> |
Step 2: HTML
グラフやチャートに使用するデータは、tableタグで実装します。これにより、検索エンジンやスクリーンリーダーには生データが参照されます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
<table> <caption> 2016 Summer Olympics Medal Table </caption> <thead> <tr> <th scope="col"> Country </th> <th scope="col"> Gold </th> <th scope="col"> Silver </th> <th scope="col"> Bronze </th> </tr> </thead> <tbody> <tr> <th scope="row"> USA </th> <td> 46 </td> <td> 37 </td> <td> 38 </td> </tr> <tr> <th scope="row"> GBR </th> <td> 27 </td> <td> 23 </td> <td> 17 </td> </tr> <tr> <th scope="row"> CHN </th> <td> 26 </td> <td> 18 </td> <td> 26 </td> </tr> </tbody> </table> |
Step 3: classの付与
tableタグに.charts-cssを加え、使用するグラフやチャートの種類（.bar, .column, .lineなど）を加えます。
|
1 2 3 |
<table class="charts-css bar"> ... </table> |
あとは、チャートの可視性を高めるために多くのユーティリティクラスが用意されています。詳しくは、下記のドキュメントをご覧ください。
簡単に作成できるようにオンラインツールも用意されています。
オプションをいろいろ試すことができ、下記のようにリアルタイムに確認できます。
sponsors
