TableタグにClassを加えるだけ：グラフやチャートを実装できるCSSフレームワークを使ってみる（Charts.css）

9821 ワード
HTML グラフ chart.js CSS 初心者 HTML テキストリンク

はじめに

Charts.cssというHTMLのClass指定だけで、チャートやグラフを表示できるフレームワークがあるということを知りましたので、どんなものか試してみました。

Charts.css

公式サイト

https://chartscss.org/
https://github.com/ChartsCSS/charts.css

CDNの指定

・CSSの設定として下記を指定

sample.html
<link rel="stylesheet" href="https://unpkg.com/charts.css/dist/charts.min.css">

CDNを指定し、テーブルタグにclassを加えていきます。charts-css の次に、チャートの種類、そしてオプション等です。

sample.html
<table class="charts-css bar hide-data show-primary-axis show-data-axes">
  ...
</table>

種類は以下のようなものがありますが、まだUnderver Developmentとなっているものもあります。
色やラベル、3D効果、アニメーションなどがあります。

サンプルでは、下記のような各国のメダル数を表示できるものがでていました。
ソースコード：https://chartscss.org/components/tooltips/

Mixed Charts

  • 簡単なMixed Chartsを作成してみました。
  • グラフの中に数字をいれることはできましたが、目盛りをいれることができなそうでした。やはり簡単にテーブルデータをグラフ・チャート化できるのが売りだと思うので、細かいことはできないことがありそうです。（目盛りは最低でもあるべきとは思いますが）
  • 折れ線グラフは、始点と終点をいれる形なので、中央に設定することはできなそうでした。

sampleMixed.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>CSS CHART</title>
    <link rel="stylesheet" href="https://unpkg.com/charts.css/dist/charts.min.css">
    <style>
    #my-chart {
      position: relative;
      height: 550px;
      width: 100%;
      max-width: 800px;
      margin: 0 auto;
    }
    #my-chart > table {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
    }
    #my-column {
      --color: lightblue;
    }
    #my-line {
      --color: darkgreen;
    }
    </style>
  </head>

  <body>

    <div id="my-chart">

      <table class="charts-css column show-heading show-labels data-spacing-20 show-primary-axis" id="my-column">
        <caption>グラフタイトルの設定</caption>
        <tbody>
          <tr><th scope="row"> 2020/7 </th><td style="--size: calc( 30000 / 150000 );">\30,000</td></tr>
          <tr><th scope="row"> 2020/8 </th><td style="--size: calc( 60000 / 150000 );">\60,000</td></tr>
          <tr><th scope="row"> 2020/9 </th><td style="--size: calc( 90000 / 150000 );">\90,000</td></tr>
          <tr><th scope="row"> 2020/10 </th><td style="--size: calc( 120000 / 150000 );">\120,000</td></tr>
        </tbody>
      </table>

      <table class="charts-css line" id="my-line">
        <tbody>
          <tr><th scope="row"> 2020/7 </th><td style="--start: 0.2; --size: 0.8;"></td></tr>
          <tr><th scope="row"> 2020/8 </th><td style="--start: 0.8; --size: 0.6;"></td></tr>
          <tr><th scope="row"> 2020/9 </th><td style="--start: 0.6; --size: 0.7;"></td></tr>
          <tr><th scope="row"> 2020/10 </th><td style="--start: 0.7; --size: 0.9;"></td></tr>
        </tbody>
      </table>

    </div>
  </body>
</html>

まとめ

  • HTMLのtableにClassを加えるだけで、グラフやチャートが実装できます。
  • すでにHTMLにTableデータがあり、その下あたりにちょっとグラフを入れたいなと思ったときに便利ではないでしょうか。
  • テーブルデータを外部から読み込み、月日などによりデータが変わっていく場合などはちょっとやりにくいですし、細かい設定を実施する際には、Chart.jsのほうが使い勝手がよさそうです。

参考URL