cssplot – CSSだけで作られているシンプルなグラフ
グラフライブラリというと、かつては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のオープンソース・ソフトウェアです。