レスポンシブなチャートJSライブラリ「CHARTIST.JS 」

チャート作成ライブラリは様々ありますが、このCHARTIST.JS は僅か10KBという軽量で、かつ他ライブラリに依存せずに、お手軽に描けます！

Chartist.jsはカスタマイズしやすく、シンプル・レスポンシブ・SVGチャートを作成するJavaScriptライブラリです。

ダウンロード

GitHub Page https://gionkunz.github.io/chartist-js/
GitHub Repo https://github.com/gionkunz/chartist-js

使い方

/chartist/dist/chartist.min.css
/chartist/dist/chartist.min.js
を読み込みます。

html<link rel="stylesheet" href=".../chartist/dist/chartist.min.css">
...
<script src=".../chartist/dist/chartist.min.js"></script>

※既存cssではなく独自に設定したい場合には、Chartist.js Sassを使ってカスタマイズできます。

追記）CDNありました！
https://cdn.jsdelivr.net/chartist.js/0.11.0/chartist.min.js
https://cdn.jsdelivr.net/chartist.js/0.11.0/chartist.min.css
https://cdn.jsdelivr.net/chartist.js/0.11.0/chartist.min.js.map

html using cdn<link rel="stylesheet" href="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.css">
...
<script src="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.js"></script>

実装

html

（例）<div class="ct-chart ct-perfect-fourth"></div>

チャートを描くブロックを設置します。

・ct-chart :
セレクタ。ページ内に複数設置する場合はidで。

・ct-perfect-fourth :
コンテナクラス（Ratio）。
レスポンシブデザインの性質上、拡大縮小に適応するためにアスペクト比を設定します。

利用できるコンテナクラスの種類はこちら。creating-a-chart-using-aspect-ratios

js

htmlに設置したブロックのセレクタと、チャートのデータを設定して、描きます。

・new Chartist.Line(...);　→　折れ線グラフ
・new Chartist.Bar(...);　→　棒グラフ
・new Chartist.Pie(...);　→　円グラフ

（例）var data = {
labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
series: [
[5, 2, 4, 2, 0]
]
};
new Chartist.Line('.ct-chart', data);

オプション

オプションでサイズ（width, height）を固定指定できます。

（例）var data = {
labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
series: [
[5, 2, 4, 2, 0]
]
};
var options = {
height: 200
};
new Chartist.Line('.ct-chart', data, options);

チャートの様々な設定ができるよう柔軟に作られており、デフォルトが設定してありますので、そのままでも。
あるいは、オプションに値を渡すことでデフォルトを上書きすることができます。

詳細はドキュメントが用意されています。CHARTIST - API DOCUMENTATION

デモ

シンプルに。

See the Pen chartist.js test by Saki (@SAKI) on CodePen.

アニメーションも！（枠内のRERUNをクリック）

See the Pen chartist.js test by Saki (@SAKI) on CodePen.

サンプル

たくさん！
GitHub Page サンプル

チャート制作も楽しめそうですね。