cssCharts.js - スタイルシートでグラフを描画
HTML5によってWebの表現力は高まっています。特にSVGやCanvasを使えば高度なグラフィックが描けます。ただし使いこなすのはそうそう簡単ではありません。そのため、まだまだスタイルシートの活躍の場はとても多いです。 そこで使ってみたいのがcssCharts.jsです。スタイルシートとJavaScriptを使って作られたグラフライブラリで、簡単に使いこなせるのが大きな利点です。
cssCharts.jsの使い方
cssCharts.jsの描けるグラフです。まずは棒グラフ。
次はドーナッツグラフ。
ドーナッツグラフの2つの値版。
さらに中央を塗りつぶしたバージョン。
次に折れ線グラフ。
塗りつぶしをなくした版。
もっとシンプルに。
そしてポイントも取り除いた版。
最後にパイチャート。
オンマウスでタイトルを表示することもできます。
例えば棒グラフの場合は次のように指定します。
<!-- HTML -->
<ul class="bar-chart" data-bars="[x1,x2],[y1,y2]" data-max="10" data-unit="k" data-grid="1" data-width="24">
// JavaScript
$('.bar-chart').cssCharts({type:"bar"});
全てdata要素を使って指定する方式のようです。HTMLに出力するだけで使えますし、サーバサイドの仕組みもいらないので手軽ですね。
cssCharts.jsはスタイルシート/JavaScript製のオープンソース・ソフトウェア（MIT License）です。