Charts.cssを使ってコーディングでグラフを作成
2024-07-05
![](https://ichikawa-webdesign.com/wp-content/uploads/2024/07/2024-07-05-112954-1024x754.jpg)
コーディングでグラフを作成したので、記事にします。
グラフですが普段だと問答無用で画像にしますが、今回は要望があったのでコーディングで作成しました。
グラフを作成するツールとしてChart.jsとCharts.cssがあります。Chart.jsはJavaScript、Charts.cssはCSSです。印象としては、Chart.jsは細かく設定できて、Charts.cssは簡単に作成できる感じです。
今回はCharts.cssでグラフを作りました。
目次
Charts.cssの説明
詳細は公式サイトをご覧ください。
https://chartscss.org
charts.cssを読み込めば利用できます。
<link rel="stylesheet" href="charts.css">
ざっくりとした説明ですが、tableタグで書いた内容がグラフ化されます。
まずはtableでコードを書きます。
2016 | 20 |
---|---|
2017 | 40 |
2018 | 60 |
2019 | 80 |
2020 | 100 |
コードはこちら
<table>
<caption> 普通の表 </caption>
<tbody>
<tr>
<th> 2016 </th>
<td> 10% </td>
</tr>
<tr>
<th> 2017 </th>
<td> 15% </td>
</tr>
<tr>
<th> 2018 </th>
<td> 20% </td>
</tr>
<tr>
<th> 2019 </th>
<td> 25% </td>
</tr>
<tr>
<th> 2020 </th>
<td> 30% </td>
</tr>
</tbody>
</table>
この表を元にしてグラフ化していきます。
※以下に説明するコード全編にいえますが、CSSの記述を省略しています。
棒グラフ(横)
まずは横の棒グラフにしました。
コードはこちら
<div class="animation-sample01">
<table
class="charts-css bar show-heading show-labels show-primary-axis show-4-secondary-axes show-data-axes data-spacing-10">
<caption> 棒グラフ(横) </caption>
<tbody>
<tr>
<th scope="row"> 2016 </th>
<td style="--size: calc( 20 / 100 );"> 20 </td>
</tr>
<tr>
<th scope="row"> 2017 </th>
<td style="--size: calc( 40 / 100 );"> 40 </td>
</tr>
<tr>
<th scope="row"> 2018 </th>
<td style="--size: calc( 60 / 100 );"> 60 </td>
</tr>
<tr>
<th scope="row"> 2019 </th>
<td style="--size: calc( 80 / 100 );"> 80 </td>
</tr>
<tr>
<th scope="row"> 2020 </th>
<td style="--size: calc( 100 / 100 );"> 100 </td>
</tr>
</tbody>
</table>
</div>
棒グラフ(縦)
次に縦の棒グラフにしました。
コードはコチラ
<div class="animation-sample02">
<table
class="charts-css column show-heading show-labels show-primary-axis show-4-secondary-axes show-data-axes data-spacing-20">
<caption> 棒グラフ(縦) </caption>
<tbody>
<tr>
<th scope="row"> 2016 </th>
<td style="--size: calc( 20 / 100 );"> 20 </td>
</tr>
<tr>
<th scope="row"> 2017 </th>
<td style="--size: calc( 40 / 100 );"> 40 </td>
</tr>
<tr>
<th scope="row"> 2018 </th>
<td style="--size: calc( 60 / 100 );"> 60 </td>
</tr>
<tr>
<th scope="row"> 2019 </th>
<td style="--size: calc( 80 / 100 );"> 80 </td>
</tr>
<tr>
<th scope="row"> 2020 </th>
<td style="--size: calc( 100 / 100 );"> 100 </td>
</tr>
</tbody>
</table>
</div>
うーん素晴らしい。CSSなので色、大きさなど…カスタマイズ可能です。
円グラフ
円グラフもできます。
表はコチラ
2016 | 10% |
---|---|
2017 | 15% |
2018 | 20% |
2019 | 25% |
2020 | 30% |
<table>
<caption> 普通の表 </caption>
<thead>
<tr>
<th scope="col"> Year </th>
<th scope="col"> Value </th>
</tr>
</thead>
<tbody>
<tr>
<th> 2016 </th>
<td> 10% </td>
</tr>
<tr>
<th> 2017 </th>
<td> 15% </td>
</tr>
<tr>
<th> 2018 </th>
<td> 20% </td>
</tr>
<tr>
<th> 2019 </th>
<td> 25% </td>
</tr>
<tr>
<th> 2020 </th>
<td> 30% </td>
</tr>
</tbody>
</table>
これを円グラフにします。
<div class="animation-sample03">
<table class="charts-css pie show-heading show-primary-axis">
<caption> 面グラフ </caption>
<tbody>
<tr>
<td style="--start: 0; --end: 0.1;"><span class="data"> 10% </span></td>
</tr>
<tr>
<td style="--start: 0.1; --end: 0.25;"><span class="data"> 15% </span></td>
</tr>
<tr>
<td style="--start: 0.25; --end: 0.45;"><span class="data"> 20% </span></td>
</tr>
<tr>
<td style="--start: 0.45; --end: 0.7;"><span class="data"> 25% </span></td>
</tr>
<tr>
<td style="--start: 0.7; --end: 1;"><span class="data"> 30% </span></td>
</tr>
</tbody>
</table>
<ul class="charts-css legend legend-inline legend-rectangle">
<li> 2016 </li>
<li> 2017 </li>
<li> 2018 </li>
<li> 2019 </li>
</ul>
</div>
アニメーション
アニメーションも可能です。
素晴らしい、映えますね。
ありそうなグラフを作りました
最後にスタートアップ企業でありそうなグラフを作成してみました。
ツールチップも付けています。売上高がアニメーションで表示されてインパクトがありますね。