テーブルタグをカンタンにグラフにできるフレームワークをご紹介します！
現在棒グラフと折れ線グラフのみですが、そのうち円グラフなどもできるようになるかも？？
Step01：Charts.cssの準備
ファイルのダウンロード
GitHubからcharts.cssをダウンロードしてきます
https://github.com/ChartsCSS/charts.css
設置
ダウンロードしてきたcharts.cssを<head>～</head>内で読み込みます。
ファイルのパスは任意です。都度変更してください。
<link rel="stylesheet" href="charts/charts.css">準備が整いました！とってもカンタンですね～
Step02：グラフの元になるテーブル準備
Charts.cssはテーブルで組まれたデータをグラフにするのでHTMLを準備しましょう
HTML：コンテンツ内
01.コンテンツ内のテーブルタグにclass="charts-css"を追加します
02.グラフのtdにサイズを追加していきます
【例】style="--size:calc(30 / 100);"
サンプル：【Chart Type】Bar
デモページ
<table class="charts-css bar show-labels">
<caption> Single Dataset Table </caption>
<thead>
<tr>
<th scope="col"> Month </th>
<th scope="col"> Progress </th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row"> Jan </th>
<td style="--size:calc(30 / 100);"><span class="data"> 30 </span></td>
</tr>
<tr>
<th scope="row"> Feb </th>
<td style="--size:calc(50 / 100);"><span class="data"> 50 </span></td>
</tr>
<tr>
<th scope="row"> Mar </th>
<td style="--size:calc(80 / 100);"><span class="data"> 80 </span></td>
</tr>
<tr>
<th scope="row"> Apr </th>
<td style="--size:calc(100 / 100);"><span class="data"> 100 </span></td>
</tr>
<tr>
<th scope="row"> May </th>
<td style="--size:calc(65 / 100);"><span class="data"> 65 </span></td>
</tr>
<tr>
<th scope="row"> Jun </th>
<td style="--size:calc(45 / 100);"><span class="data"> 45 </span></td>
</tr>
<tr>
<th scope="row"> Jul </th>
<td style="--size:calc(15 / 100);"><span class="data"> 15 </span></td>
</tr>
<tr>
<th scope="row"> Aug </th>
<td style="--size:calc(32 / 100);"><span class="data"> 32 </span></td>
</tr>
<tr>
<th scope="row"> Sep </th>
<td style="--size:calc(60 / 100);"><span class="data"> 60 </span></td>
</tr>
<tr>
<th scope="row"> Oct </th>
<td style="--size:calc(90 / 100);"><span class="data"> 90 </span></td>
</tr>
<tr>
<th scope="row"> Nov </th>
<td style="--size:calc(55 / 100);"><span class="data"> 55 </span></td>
</tr>
<tr>
<th scope="row"> Dec </th>
<td style="--size:calc(40 / 100);"><span class="data"> 40 </span></td>
</tr>
</tbody>
</table>はい！完成です
あっという間にできちゃいましたね～
現在使えるビルダーも用意されているので下記URLで作りたいグラフのタイプを選択して設置しましょう＾＾
https://chartscss.org/examples/chart-builder/
その他のグラフについて
縦棒グラフや折れ線グラフの場合、テーブルに高さ指定が必要になるのでCSSで指定してあげてください
サンプル：【Chart Type】Column
<table class="charts-css column show-labels">
<caption> Single Dataset Table </caption>
<thead>
<tr>
<th scope="col"> Month </th>
<th scope="col"> Progress </th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row"> Jan </th>
<td style="--size:calc(30 / 100);"><span class="data"> 30 </span></td>
</tr>
<tr>
<th scope="row"> Feb </th>
<td style="--size:calc(50 / 100);"><span class="data"> 50 </span></td>
</tr>
<tr>
<th scope="row"> Mar </th>
<td style="--size:calc(80 / 100);"><span class="data"> 80 </span></td>
</tr>
<tr>
<th scope="row"> Apr </th>
<td style="--size:calc(100 / 100);"><span class="data"> 100 </span></td>
</tr>
<tr>
<th scope="row"> May </th>
<td style="--size:calc(65 / 100);"><span class="data"> 65 </span></td>
</tr>
<tr>
<th scope="row"> Jun </th>
<td style="--size:calc(45 / 100);"><span class="data"> 45 </span></td>
</tr>
<tr>
<th scope="row"> Jul </th>
<td style="--size:calc(15 / 100);"><span class="data"> 15 </span></td>
</tr>
<tr>
<th scope="row"> Aug </th>
<td style="--size:calc(32 / 100);"><span class="data"> 32 </span></td>
</tr>
<tr>
<th scope="row"> Sep </th>
<td style="--size:calc(60 / 100);"><span class="data"> 60 </span></td>
</tr>
<tr>
<th scope="row"> Oct </th>
<td style="--size:calc(90 / 100);"><span class="data"> 90 </span></td>
</tr>
<tr>
<th scope="row"> Nov </th>
<td style="--size:calc(55 / 100);"><span class="data"> 55 </span></td>
</tr>
<tr>
<th scope="row"> Dec </th>
<td style="--size:calc(40 / 100);"><span class="data"> 40 </span></td>
</tr>
</tbody>
</table>サンプル：【Chart Type】Area
折れ線グラフの場合、グラフのtdにスタート位置を追加していきます
【例】style="--start:calc(30 / 100);"
<table class="charts-css area show-labels">
<caption> Single Dataset Table </caption>
<thead>
<tr>
<th scope="col"> Month </th>
<th scope="col"> Progress </th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row"> Jan </th>
<td style="--start:0; --size:calc(30 / 100);"><span class="data"> 30 </span></td>
</tr>
<tr>
<th scope="row"> Feb </th>
<td style="--start:calc(30 / 100); --size:calc(50 / 100);"><span class="data"> 50 </span></td>
</tr>
<tr>
<th scope="row"> Mar </th>
<td style="--start:calc(50 / 100); --size:calc(80 / 100);"><span class="data"> 80 </span></td>
</tr>
<tr>
<th scope="row"> Apr </th>
<td style="--start:calc(80 / 100); --size:calc(100 / 100);"><span class="data"> 100 </span></td>
</tr>
<tr>
<th scope="row"> May </th>
<td style="--start:calc(100 / 100); --size:calc(65 / 100);"><span class="data"> 65 </span></td>
</tr>
<tr>
<th scope="row"> Jun </th>
<td style="--start:calc(65 / 100); --size:calc(45 / 100);"><span class="data"> 45 </span></td>
</tr>
<tr>
<th scope="row"> Jul </th>
<td style="--start:calc(45 / 100); --size:calc(15 / 100);"><span class="data"> 15 </span></td>
</tr>
<tr>
<th scope="row"> Aug </th>
<td style="--start:calc(15 / 100); --size:calc(32 / 100);"><span class="data"> 32 </span></td>
</tr>
<tr>
<th scope="row"> Sep </th>
<td style="--start:calc(32 / 100); --size:calc(60 / 100);"><span class="data"> 60 </span></td>
</tr>
<tr>
<th scope="row"> Oct </th>
<td style="--start:calc(60 / 100); --size:calc(90 / 100);"><span class="data"> 90 </span></td>
</tr>
<tr>
<th scope="row"> Nov </th>
<td style="--start:calc(90 / 100); --size:calc(55 / 100);"><span class="data"> 55 </span></td>
</tr>
<tr>
<th scope="row"> Dec </th>
<td style="--start:calc(55 / 100); --size:calc(40 / 100);"><span class="data"> 40 </span></td>
</tr>
</tbody>
</table>サンプル：【Chart Type】Line
<table class="charts-css line show-labels">
<caption> Single Dataset Table </caption>
<thead>
<tr>
<th scope="col"> Month </th>
<th scope="col"> Progress </th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row"> Jan </th>
<td style="--start:0; --size:calc(30 / 100);"><span class="data"> 30 </span></td>
</tr>
<tr>
<th scope="row"> Feb </th>
<td style="--start:calc(30 / 100); --size:calc(50 / 100);"><span class="data"> 50 </span></td>
</tr>
<tr>
<th scope="row"> Mar </th>
<td style="--start:calc(50 / 100); --size:calc(80 / 100);"><span class="data"> 80 </span></td>
</tr>
<tr>
<th scope="row"> Apr </th>
<td style="--start:calc(80 / 100); --size:calc(100 / 100);"><span class="data"> 100 </span></td>
</tr>
<tr>
<th scope="row"> May </th>
<td style="--start:calc(100 / 100); --size:calc(65 / 100);"><span class="data"> 65 </span></td>
</tr>
<tr>
<th scope="row"> Jun </th>
<td style="--start:calc(65 / 100); --size:calc(45 / 100);"><span class="data"> 45 </span></td>
</tr>
<tr>
<th scope="row"> Jul </th>
<td style="--start:calc(45 / 100); --size:calc(15 / 100);"><span class="data"> 15 </span></td>
</tr>
<tr>
<th scope="row"> Aug </th>
<td style="--start:calc(15 / 100); --size:calc(32 / 100);"><span class="data"> 32 </span></td>
</tr>
<tr>
<th scope="row"> Sep </th>
<td style="--start:calc(32 / 100); --size:calc(60 / 100);"><span class="data"> 60 </span></td>
</tr>
<tr>
<th scope="row"> Oct </th>
<td style="--start:calc(60 / 100); --size:calc(90 / 100);"><span class="data"> 90 </span></td>
</tr>
<tr>
<th scope="row"> Nov </th>
<td style="--start:calc(90 / 100); --size:calc(55 / 100);"><span class="data"> 55 </span></td>
</tr>
<tr>
<th scope="row"> Dec </th>
<td style="--start:calc(55 / 100); --size:calc(40 / 100);"><span class="data"> 40 </span></td>
</tr>
</tbody>
</table>
