簡単実装：Charts.cssでテーブルタグをグラフやチャートにできる！

てっちゃん
てっちゃん

テーブルタグをカンタンにグラフにできるフレームワークをご紹介します！

現在棒グラフと折れ線グラフのみですが、そのうち円グラフなどもできるようになるかも？？

デモページ

Step01：Charts.cssの準備

ファイルのダウンロード

GitHubからcharts.cssをダウンロードしてきます
https://github.com/ChartsCSS/charts.css

Charts.css

設置

ダウンロードしてきたcharts.cssを<head>～</head>内で読み込みます。

ファイルのパスは任意です。都度変更してください。

  1. <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
デモページ

  1. <table class="charts-css bar show-labels">
  2. 	<caption> Single Dataset Table </caption>
  3. 	<thead>
  4. 		<tr>
  5. 			<th scope="col"> Month </th>
  6. 			<th scope="col"> Progress </th>
  7. 		</tr>
  8. 	</thead>
  9. 	<tbody>
  10. 		<tr>
  11. 			<th scope="row"> Jan </th>
  12. 			<td style="--size:calc(30 / 100);"><span class="data"> 30 </span></td>
  13. 		</tr>
  14. 		<tr>
  15. 		<th scope="row"> Feb </th>
  16. 			<td style="--size:calc(50 / 100);"><span class="data"> 50 </span></td>
  17. 		</tr>
  18. 		<tr>
  19. 		<th scope="row"> Mar </th>
  20. 			<td style="--size:calc(80 / 100);"><span class="data"> 80 </span></td>
  21. 		</tr>
  22. 		<tr>
  23. 		<th scope="row"> Apr </th>
  24. 			<td style="--size:calc(100 / 100);"><span class="data"> 100 </span></td>
  25. 		</tr>
  26. 		<tr>
  27. 		<th scope="row"> May </th>
  28. 			<td style="--size:calc(65 / 100);"><span class="data"> 65 </span></td>
  29. 		</tr>
  30. 		<tr>
  31. 		<th scope="row"> Jun </th>
  32. 			<td style="--size:calc(45 / 100);"><span class="data"> 45 </span></td>
  33. 		</tr>
  34. 		<tr>
  35. 		<th scope="row"> Jul </th>
  36. 			<td style="--size:calc(15 / 100);"><span class="data"> 15 </span></td>
  37. 		</tr>
  38. 		<tr>
  39. 		<th scope="row"> Aug </th>
  40. 			<td style="--size:calc(32 / 100);"><span class="data"> 32 </span></td>
  41. 		</tr>
  42. 		<tr>
  43. 		<th scope="row"> Sep </th>
  44. 			<td style="--size:calc(60 / 100);"><span class="data"> 60 </span></td>
  45. 		</tr>
  46. 		<tr>
  47. 		<th scope="row"> Oct </th>
  48. 			<td style="--size:calc(90 / 100);"><span class="data"> 90 </span></td>
  49. 		</tr>
  50. 		<tr>
  51. 		<th scope="row"> Nov </th>
  52. 			<td style="--size:calc(55 / 100);"><span class="data"> 55 </span></td>
  53. 		</tr>
  54. 		<tr>
  55. 		<th scope="row"> Dec </th>
  56. 			<td style="--size:calc(40 / 100);"><span class="data"> 40 </span></td>
  57. 		</tr>
  58. 	</tbody>
  59. </table>

はい！完成です
あっという間にできちゃいましたね～

現在使えるビルダーも用意されているので下記URLで作りたいグラフのタイプを選択して設置しましょう＾＾
https://chartscss.org/examples/chart-builder/

その他のグラフについて

縦棒グラフや折れ線グラフの場合、テーブルに高さ指定が必要になるのでCSSで指定してあげてください

サンプル：【Chart Type】Column

デモページ

  1. <table class="charts-css column show-labels">
  2. 	<caption> Single Dataset Table </caption>
  3. 	<thead>
  4. 		<tr>
  5. 			<th scope="col"> Month </th>
  6. 			<th scope="col"> Progress </th>
  7. 		</tr>
  8. 	</thead>
  9. 	<tbody>
  10. 		<tr>
  11. 			<th scope="row"> Jan </th>
  12. 			<td style="--size:calc(30 / 100);"><span class="data"> 30 </span></td>
  13. 		</tr>
  14. 		<tr>
  15. 		<th scope="row"> Feb </th>
  16. 			<td style="--size:calc(50 / 100);"><span class="data"> 50 </span></td>
  17. 		</tr>
  18. 		<tr>
  19. 		<th scope="row"> Mar </th>
  20. 			<td style="--size:calc(80 / 100);"><span class="data"> 80 </span></td>
  21. 		</tr>
  22. 		<tr>
  23. 		<th scope="row"> Apr </th>
  24. 			<td style="--size:calc(100 / 100);"><span class="data"> 100 </span></td>
  25. 		</tr>
  26. 		<tr>
  27. 		<th scope="row"> May </th>
  28. 			<td style="--size:calc(65 / 100);"><span class="data"> 65 </span></td>
  29. 		</tr>
  30. 		<tr>
  31. 		<th scope="row"> Jun </th>
  32. 			<td style="--size:calc(45 / 100);"><span class="data"> 45 </span></td>
  33. 		</tr>
  34. 		<tr>
  35. 		<th scope="row"> Jul </th>
  36. 			<td style="--size:calc(15 / 100);"><span class="data"> 15 </span></td>
  37. 		</tr>
  38. 		<tr>
  39. 		<th scope="row"> Aug </th>
  40. 			<td style="--size:calc(32 / 100);"><span class="data"> 32 </span></td>
  41. 		</tr>
  42. 		<tr>
  43. 		<th scope="row"> Sep </th>
  44. 			<td style="--size:calc(60 / 100);"><span class="data"> 60 </span></td>
  45. 		</tr>
  46. 		<tr>
  47. 		<th scope="row"> Oct </th>
  48. 			<td style="--size:calc(90 / 100);"><span class="data"> 90 </span></td>
  49. 		</tr>
  50. 		<tr>
  51. 		<th scope="row"> Nov </th>
  52. 			<td style="--size:calc(55 / 100);"><span class="data"> 55 </span></td>
  53. 		</tr>
  54. 		<tr>
  55. 		<th scope="row"> Dec </th>
  56. 			<td style="--size:calc(40 / 100);"><span class="data"> 40 </span></td>
  57. 		</tr>
  58. 	</tbody>
  59. </table>

サンプル：【Chart Type】Area

折れ線グラフの場合、グラフのtdにスタート位置を追加していきます
【例】style="--start:calc(30 / 100);"

デモページ

  1. <table class="charts-css area show-labels">
  2. 	<caption> Single Dataset Table </caption>
  3. 	<thead>
  4. 		<tr>
  5. 			<th scope="col"> Month </th>
  6. 			<th scope="col"> Progress </th>
  7. 		</tr>
  8. 	</thead>
  9. 	<tbody>
  10. 		<tr>
  11. 			<th scope="row"> Jan </th>
  12. 			<td style="--start:0; --size:calc(30 / 100);"><span class="data"> 30 </span></td>
  13. 		</tr>
  14. 		<tr>
  15. 		<th scope="row"> Feb </th>
  16. 			<td style="--start:calc(30 / 100); --size:calc(50 / 100);"><span class="data"> 50 </span></td>
  17. 		</tr>
  18. 		<tr>
  19. 		<th scope="row"> Mar </th>
  20. 			<td style="--start:calc(50 / 100); --size:calc(80 / 100);"><span class="data"> 80 </span></td>
  21. 		</tr>
  22. 		<tr>
  23. 		<th scope="row"> Apr </th>
  24. 			<td style="--start:calc(80 / 100); --size:calc(100 / 100);"><span class="data"> 100 </span></td>
  25. 		</tr>
  26. 		<tr>
  27. 		<th scope="row"> May </th>
  28. 			<td style="--start:calc(100 / 100); --size:calc(65 / 100);"><span class="data"> 65 </span></td>
  29. 		</tr>
  30. 		<tr>
  31. 		<th scope="row"> Jun </th>
  32. 			<td style="--start:calc(65 / 100); --size:calc(45 / 100);"><span class="data"> 45 </span></td>
  33. 		</tr>
  34. 		<tr>
  35. 		<th scope="row"> Jul </th>
  36. 			<td style="--start:calc(45 / 100); --size:calc(15 / 100);"><span class="data"> 15 </span></td>
  37. 		</tr>
  38. 		<tr>
  39. 		<th scope="row"> Aug </th>
  40. 			<td style="--start:calc(15 / 100); --size:calc(32 / 100);"><span class="data"> 32 </span></td>
  41. 		</tr>
  42. 		<tr>
  43. 		<th scope="row"> Sep </th>
  44. 			<td style="--start:calc(32 / 100); --size:calc(60 / 100);"><span class="data"> 60 </span></td>
  45. 		</tr>
  46. 		<tr>
  47. 		<th scope="row"> Oct </th>
  48. 			<td style="--start:calc(60 / 100); --size:calc(90 / 100);"><span class="data"> 90 </span></td>
  49. 		</tr>
  50. 		<tr>
  51. 		<th scope="row"> Nov </th>
  52. 			<td style="--start:calc(90 / 100); --size:calc(55 / 100);"><span class="data"> 55 </span></td>
  53. 		</tr>
  54. 		<tr>
  55. 		<th scope="row"> Dec </th>
  56. 			<td style="--start:calc(55 / 100); --size:calc(40 / 100);"><span class="data"> 40 </span></td>
  57. 		</tr>
  58. 	</tbody>
  59. </table>

サンプル：【Chart Type】Line

デモページ

  1. <table class="charts-css line show-labels">
  2. 	<caption> Single Dataset Table </caption>
  3. 	<thead>
  4. 		<tr>
  5. 			<th scope="col"> Month </th>
  6. 			<th scope="col"> Progress </th>
  7. 		</tr>
  8. 	</thead>
  9. 	<tbody>
  10. 		<tr>
  11. 			<th scope="row"> Jan </th>
  12. 			<td style="--start:0; --size:calc(30 / 100);"><span class="data"> 30 </span></td>
  13. 		</tr>
  14. 		<tr>
  15. 		<th scope="row"> Feb </th>
  16. 			<td style="--start:calc(30 / 100); --size:calc(50 / 100);"><span class="data"> 50 </span></td>
  17. 		</tr>
  18. 		<tr>
  19. 		<th scope="row"> Mar </th>
  20. 			<td style="--start:calc(50 / 100); --size:calc(80 / 100);"><span class="data"> 80 </span></td>
  21. 		</tr>
  22. 		<tr>
  23. 		<th scope="row"> Apr </th>
  24. 			<td style="--start:calc(80 / 100); --size:calc(100 / 100);"><span class="data"> 100 </span></td>
  25. 		</tr>
  26. 		<tr>
  27. 		<th scope="row"> May </th>
  28. 			<td style="--start:calc(100 / 100); --size:calc(65 / 100);"><span class="data"> 65 </span></td>
  29. 		</tr>
  30. 		<tr>
  31. 		<th scope="row"> Jun </th>
  32. 			<td style="--start:calc(65 / 100); --size:calc(45 / 100);"><span class="data"> 45 </span></td>
  33. 		</tr>
  34. 		<tr>
  35. 		<th scope="row"> Jul </th>
  36. 			<td style="--start:calc(45 / 100); --size:calc(15 / 100);"><span class="data"> 15 </span></td>
  37. 		</tr>
  38. 		<tr>
  39. 		<th scope="row"> Aug </th>
  40. 			<td style="--start:calc(15 / 100); --size:calc(32 / 100);"><span class="data"> 32 </span></td>
  41. 		</tr>
  42. 		<tr>
  43. 		<th scope="row"> Sep </th>
  44. 			<td style="--start:calc(32 / 100); --size:calc(60 / 100);"><span class="data"> 60 </span></td>
  45. 		</tr>
  46. 		<tr>
  47. 		<th scope="row"> Oct </th>
  48. 			<td style="--start:calc(60 / 100); --size:calc(90 / 100);"><span class="data"> 90 </span></td>
  49. 		</tr>
  50. 		<tr>
  51. 		<th scope="row"> Nov </th>
  52. 			<td style="--start:calc(90 / 100); --size:calc(55 / 100);"><span class="data"> 55 </span></td>
  53. 		</tr>
  54. 		<tr>
  55. 		<th scope="row"> Dec </th>
  56. 			<td style="--start:calc(55 / 100); --size:calc(40 / 100);"><span class="data"> 40 </span></td>
  57. 		</tr>
  58. 	</tbody>
  59. </table>

関連記事