ITエンジニア/デザイナ向けにオープンソースを毎日紹介

グラフライブラリというと、かつてはFlashを使ったり今はSVG/Canvasを使って描画するものが多いです。格好良いグラフが描けるのは確かですが、利用までの敷居が若干高いのが難点と言えるでしょう。

そこで紹介したいのがcssplot、スタイルシートだけで作られたグラフライブラリです。これならば導入が簡単になりそうです。

cssplotの使い方

ベースになるHTMLは次のようになります。普通のリストですね。

<div class="bar-chart">
  <ul class="container">
    <li data-cp-size="99">99%</li>
    <li data-cp-size="50">50%</li>
    <li data-cp-size="30">30%</li>
    <li data-cp-size="90">90%</li>
    <li data-cp-size="10">10%</li>
    <li data-cp-size="70">70%</li>
    <li data-cp-size="30">30%</li>
    <li data-cp-size="90">90%</li>
  </ul>
</div>

これにスタイルシートがあたると次にようになります。

棒グラフ。
棒グラフ。

同様に横の棒グラフ。
同様に横の棒グラフ。

散布図もあります。
散布図もあります。

リストを使ってグラフにしてくれるので、スタイルシートが読み込めなかった場合でもデータの確認ができます。スクリーンリーダーにとっても優しいグラフライブラリと言えるのではないでしょうか。

cssplotはスタイルシート製、MIT Licenseのオープンソース・ソフトウェアです。

cssplot

asciimoo/cssplot

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2