棒グラフをCSSフレームワーク「Charts.css」で作ったら超便利だった

Chart.cssとは

Charts.cssは、CSSだけでグラフを作成することができるCSSフレームワーク。
色やサイズ、アニメーションなどもCSSだけの知識なのでカスタマイズしやすい。

またデータ元となるのは、HTMLの表組（テーブル）で用意する。
グラフのための不自然なHTMLを書かずに済むのはすごく良い。

使えるグラフの種類

• 棒グラフ（縦・横・積み上げ可）
• 折れ線グラフ
• 面グラフ

現状は上記のグラフが書ける。公式のRoadmapopen_in_newでは円グラフやラジアルチャートなど、他のグラフの計画もあるようだ。

現状使えるグラフを試したが、個人的には棒グラフ以外は今ひとつだった。

導入方法

導入方法は3つ用意されている。

• ダウンロード

  最新版はChart.cssのGitHubリポジトリopen_in_newからダウンロードできる。
  あとは自身の環境にcssファイルをアップして、使用するページで読み込む。

• CDN

  jsdelivropen_in_newと unpkgに用意されているのでどちらかを使用。

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

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

• Package Manager
  

  Node.jsを利用したアプリケーションの場合は、npmやyarnなどの好きなパッケージマネージャーでインストールできる。

  //Install using npm
  npm install charts.css
  

  ///Install using yarn
  yarn add charts.css
  

記事執筆時点での情報となるので、
詳細は公式ページの「Installation | Charts.cssopen_in_new」を確認するのがよい。

Charts.cssで棒グラフをつくってみる

棒グラフはデータの大小を比較するのに向いている。
今回は詐欺グラフとして有名な棒グラフを普通の棒グラフにしてみようと思う。

縦棒グラフ

まずはグラフの下準備としてHTMLのテーブルを用意する。
グラフではthead要素は表示されないが、HTML構造としてあったほうが良いので入れている。
ちなみにデフォルトのグラフの色はカラフル。

テーブルを用意したら、Chart.cssで準備されているクラスを適宜追加するとグラフ表示になる。

東京大学 2015～2017年度 入試合格実績

年度	東大合格者数
2015	1,244名
2016	1,139名
2017	1,290名

この縦棒グラフのtableタグに追加したChart.cssのclassは下記の通り。

<table class="charts-css column multiple show-heading show-labels data-spacing-10 show-primary-axis show-6-secondary-axes">

• charts-css
  Charts.cssを使用するテーブルに付けるclass。
• column
  グラフの種類を縦棒グラフにするためのclass。
• multiple
  本来は1軸に複数のデータがあるときに付けるclass。
  色を統一するのに手っ取り早いので付けた。
• show-heading
  グラフのタイトルを表示したい場合に付けるclass。（テーブル内にcaptionタグが必要。）
  使用せずにテーブルの外に見出しタグなど設けるでもよさそう。
• show-labels
  データラベルを表示したい場合に付けるclass。
• data-spacing-10
  棒グラフの間隔を空けたい場合に付けるclass。
  間隔の幅（数値の部分）は1～20まで用意されている。
• show-primary-axis
  主軸（グラフの開始線）の線を表示したい場合に付けるclass。
• show-6-secondary-axes
  目盛り線を表示した場合に付けるclass。
  目盛りの数（数値の部分）は1～10まで用意されている。

棒グラフ（マーカー）の長さは、データ（値）を入れているtdタグにstyleでサイズを指定する仕様となっている。

<tr>
<th>2015</th>
<td style="--size: calc(1244 / 1300)">1,244名</td>
</tr>
<tr>
<th>2016</th>
<td style="--size: calc(1139 / 1300)">1,139名</td>
</tr>
<tr>
<th>2017</th>
<td style="--size: calc(1290 / 1300)">1,290名</td>
</tr>

なお、グラフの描画エリアのサイズは、divなどのWrapperで囲って指定するのが公式の手法。
これは凡例や軸ラベルを表示する際、tableのHTML構造だけでは不可能なので、グラフエリアのサイズもWrapperに指定する方法で紹介していると思われる。凡例や軸ラベルを付けない場合はWrapperがなくてもいける。
お試しグラフではtableタグは沢山のclassが付いているのでtbodyに指定した。

<tbody style="height:275px; width:100%;">

横棒グラフ（積み上げ）

同じようにグラフの下準備としてHTMLのテーブルを用意する。

テーブルを用意したら、Chart.cssで準備されているクラスを適宜追加するとグラフ表示になる。

• ■そう思う
• ■そう思わない

この横棒グラフ（積み上げ）のtableタグに追加したChart.cssのclassは下記の通り。
ちなみに凡例はCharts.cssは使わずtableの後ろにHTMLで書いている。

<table class="charts-css bar multiple stacked show-heading show-labels data-spacing-10 show-primary-axis show-10-secondary-axes">

前述の縦棒グラフを試した時には使わなかったclassのみ説明する。

• bar
  グラフの種類を横棒グラフにするためのclass。
• multiple
  1軸に複数のデータがあるときに付けるclass。
• stacked
  複数のデータを積み上げるときに付けるclass。

一部のマーカー（日本のそう思わない）に、Chart.cssで用意されているtooltipの機能で補足を付けた。

<tr>
<th><big class="flag-icon flag-icon-jp"></big><small>日本</small></th>
<td style="--size: calc(84.75 / 100)">84.75%</td>
<td style="--size: calc(15.25 / 100)">15.25%<span class="tooltip">欧米の3～4倍</span></td>
</tr>

これで大体の使い方は掴めた。
結局は公式ページの説明open_in_newを見る方が分かりやすいと思う。

おわりに

データのネタ元として使った詐欺グラフは、あくまで見せ方で工夫しているマシなものを使用した。
探すともっと酷い詐欺グラフがたくさん使われているようで、脳死でテレビ見るのが怖くなった。

Charts.cssは、棒グラフなら超便利だが、折れ線グラフや面グラフについては面倒な手順のわりにグラフとしても微妙な品質で、個人的には使わなさそうと感じた。
今後の予定にある円グラフなど、楽しみに期待して待ちたい。