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

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)です。

cssCharts.js - jquery css charts

sultantarimo/cssCharts.js

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2