WordPress関連プラグイン

Charts.cssを使ってコーディングでグラフを作成

2024-07-05

コーディングでグラフを作成したので、記事にします。

グラフですが普段だと問答無用で画像にしますが、今回は要望があったのでコーディングで作成しました。

グラフを作成するツールとして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>

アニメーション

アニメーションも可能です。

素晴らしい、映えますね。

ありそうなグラフを作りました

最後にスタートアップ企業でありそうなグラフを作成してみました。

ツールチップも付けています。売上高がアニメーションで表示されてインパクトがありますね。