ブログデザイン備忘録 ～ チャート作成2

　前回に続きHTML上のテーブルの数値をグラフに変換するCharts.cssを用いて縦方向のバーチャート、エリアチャート、ラインチャートの作成方法について紹介する。

atatat.hatenablog.com

前回紹介したように、charts.cssを読み込んだ上で作成したテーブルのclass名を変換したいチャート形式に紐づく特定のクラス名にする。

ただし、テーブルなどの数値を自動的にグラフにするわけではなく、例えば各データのバーの長さはHTMLのstyleで指定する必要があった。

1. 縦方向のバーチャート

　前回は横方向のバーチャートだったが、縦方向のバーチャートを適用するにはclass="charts-css column"とする。バーの長さについては各データに対してstyle="--size:0.46;"などとして指定する。 このまま適用すると縦方向につぶれたようなバーチャートが表示されるため、tableの例えばid="my-chart"としてIDを割り振りCSSで縦サイズを指定すると綺麗なバーチャートが得られる。

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

<table class="charts-css column multiple show-heading show-labels" id="my-chart">
 
  <caption>Multiple Dataset Table </caption>
 
  <thead>
    <tr>
      <th scope="col"> Year </th>
      <th scope="col"> Progress 1 </th>
      <th scope="col"> Progress 2  </th>
      <th scope="col"> Progress 3 </th>
      <th scope="col"> Progress 4 </th>
      <th scope="col"> Progress 5 </th>
    </tr>
  </thead>
 
  <tbody>
    <tr>
      <th scope="row"> 2000 </th>
      <td style="--size:0.46;"> 46 </td>
      <td style="--size:0.37;"> 37 </td>
      <td style="--size:1.0;"> 100 </td>
      <td style="--size:0.7;"> 70 </td>
      <td style="--size:0.4;"> 40 </td>
    </tr>
  <!- …(中略) ->
  </tbody>
 
</table>

#my-chart {
  height:250px;
  width:500px;
}

3. エリアチャート、ラインチャート

　エリアチャート、ラインチャートを作成するには、要素のサイズだけでなく一つ前の要素サイズを指定する必要がある。そこで例えばstyle="--start: 0.2; --size: 0.4"とすると前の要素0.2から現在の要素0.4への変動を指定することができ、次の要素は例えばstyle="--start: 0.4; --size: 0.8"と指定する。エリアチャートにする場合はclass="charts-css area", ラインチャートはclass="charts-css line"とする。縦方向のバーチャートと同様にIDを割り振って、CSSで縦方向のサイズを指定すると綺麗なチャートが得られる。

<table class="charts-css area show-heading show-labels" id="my-chart2">
 
<caption>Multiple Dataset Table </caption>

  <tbody>
    <tr>
      <td style="--start: 0.2; --size: 0.4"> <span class="data"> $ 40K </span> </td>
    </tr>
    <tr>
      <td style="--start: 0.4; --size: 0.8"> <span class="data"> $ 80K </span> </td>
    </tr>
    <tr>
      <td style="--start: 0.8; --size: 0.6"> <span class="data"> $ 60K </span> </td>
    </tr>
    <tr>
      <td style="--start: 0.6; --size: 1.0"> <span class="data"> $ 100K </span> </td>
    </tr>
    <tr>
      <td style="--start: 1.0; --size: 0.3"> <span class="data">$30K </span> </td>
    </tr>
  </tbody>

</table>

#my-chart2 {
  height:250px;
  width:500px;
}

3. 実装例

　以上上で取り上げた縦方向のバーチャート、エリアチャート、ラインチャートの実装例を以下に示す。

See the Pen charts-2 by ATATAT (@atatat) on CodePen.