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

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

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

関連記事

ゆにメモ

線、棒、円形などのグラフを描画してくれるjQueryプラグイン2選

https://blog.universe-web.jp/6366

こんにちは、hgmです。今回は線、棒、円などのグラフを描画してくれるjQueryプラグインを2点ご紹介したいと思います。 グラフを表示するにはデザインした画像を貼り付ける形でも問題無いと思いますが、jQueryプラグインを使用することで数値の変更がすぐ反映できる、プラグインによってはアニメーションが付けられる等のメリットがあります。 Chart.js棒グラフ、線グラフ、円グラフ、面グラフ、曲線グラフ、対数目盛、時間のグラフ表示が可能です。アニメーションなどのオプションも豊富で細かく設定できるので、理想通りの...

Chart.cssとは？

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

特徴

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

使い方

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

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

ChartsCSS – Download

<link rel="stylesheet" href="path/to/your/charts.min.css">

CDNも提供されています

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

① jsdelivr から読み込む

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/charts.css/dist/charts.min.css">

② unpkg から読み込む

<link rel="stylesheet" href="https://unpkg.com/charts.css/dist/charts.min.css">

HTML/CSSクラスの記述方法

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

<table>

  <caption> 2016年夏季オリンピックメダルテーブル </caption>

  <thead>
    <tr>
      <th scope="col"> 国 </th>
      <th scope="col"> 金メダル </th>
      <th scope="col"> 銀メダル </th>
      <th scope="col"> 銅メダル </th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <th scope="row"> アメリカ </th>
      <td> 46 </td>
      <td> 37 </td>
      <td> 38 </td>
    </tr>
    <tr>
      <th scope="row"> イギリス </th>
      <td> 27 </td>
      <td> 23 </td>
      <td> 17 </td>
    </tr>
    <tr>
      <th scope="row"> 中国 </th>
      <td> 26 </td>
      <td> 18 </td>
      <td> 26 </td>
    </tr>
  </tbody>

</table>

Charts.cssを適用する

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

<table class="charts-css">
  ...
</table>

チャートタイプ

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

<table class="charts-css bar">
  ...
</table>

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

コンポーネントクラス

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

<table class="charts-css bar hide-data show-primary-axis show-data-axes">
  ...
</table>

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

<table class="charts-css [ line ] [ multiple ] [ show-labels labels-align-start ] [ hide-data reverse-data data-spacing-5 ] [ show-primary-axis show-data-axes ] ">
  ...
</table>

カスタムスタイリング

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

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

<table class="charts-css bar ..." id="my-chart">
  ...
</table>

#my-chart {
  ...
}

実装サンプル

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

<table class="charts-css column multiple show-heading show-labels show-data-axes datasets-spacing-10" id="mytable">

  <caption> 2016年夏季オリンピックメダルテーブル </caption>

  <thead>
    <tr>
      <th scope="col"> 国 </th>
      <th scope="col"> 金メダル </th>
      <th scope="col"> 銀メダル </th>
      <th scope="col"> 銅メダル </th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <th scope="row"> アメリカ </th>
      <td style="--size: calc( 46 / 50 );"> 46 <br>🥇</td>
      <td style="--size: calc( 37 / 50 );"> 37 <br>🥈</td>
      <td style="--size: calc( 38 / 50 );"> 38 <br>🥉</td>
    </tr>
    <tr>
      <th scope="row"> イギリス </th>
      <td style="--size: calc( 27 / 50 );"> 27 <br>🥇</td>
      <td style="--size: calc( 23 / 50 );"> 23 <br>🥈</td>
      <td style="--size: calc( 17 / 50 );"> 17 <br>🥉</td>
    </tr>
    <tr>
      <th scope="row"> 中国 </th>
      <td style="--size: calc( 26 / 50 );"> 26 <br>🥇</td>
      <td style="--size: calc( 18 / 50 );"> 18 <br>🥈</td>
      <td style="--size: calc( 26 / 50 );"> 26 <br>🥉</td>
    </tr>
  </tbody>

</table>

#mytable{
  width: 500px;
  height: 300px;
}

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

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

ChartsCSS – Examples

チャートビルダーを利用

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

ChartsCSS – Builder

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

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