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

　今回はHTML上のテーブルの数値をグラフに変換するCharts.cssについて紹介する。

詳細や実際に作成できるチャートの例は以下に

おおまかな使用方法としては、まずcharts.cssを読み込んだ上で作成したテーブルのclass名を変換したいチャート形式に紐づく特定のクラス名にするだけでよい。

ただし、実際に使ってみるとチャート形式の変換までで、例えばバーチャートの場合、各データのバーの長さはHTMLのstyleで指定する必要があった。

chatrs.cssを読み込むには外部ファイルとしてロードする方法やCDNを利用する方法があるが、今回はCDNを利用する。

htmlコードの概略は以下の通りで、CDNからcharts.cssを読み込み、バーチャートの場合はtableのクラス名をchats-css barとする。テーブルのデータを反映したバーの長さにするため、<td style="--size:0.46;">などとする。

<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>