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

<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」のご紹介でした。

 

 

関連記事

この記事を書いた人

社員K

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