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

Webは表現力が弱いと言われていますが、特にグラフ周りで苦労することが多いのではないでしょうか。データを単純に一覧表示するのではなく、グラフを用いることでトレンドを知ったり、よりビジュアル的に把握できるようになります。

そこで今回は最新のグラフライブラリ、Chartistを紹介します。SVGで描かれたレスポンシブなグラフライブラリです。

Chartistの使い方

線グラフの例。
線グラフの例。

シリーズをJavaScriptの配列で与えるだけ。とても簡単ですね。

ゲージグラフ。
ゲージグラフ。

他にもこのような棒グラフ、円グラフに対応しています。
他にもこのような棒グラフ、円グラフに対応しています。

ChartistはSVGでグラフを描き、スタイルシートでビジュアルを調整できます。さらにレスポンシブに対応することで幅によってラベルの表示を変更するようになっています。対応ブラウザはIE9以降となっています。

ChartistはJavaScript製のソフトウェア(ライセンスはWTFPL)です。

Chartist - Simple responsive charts

gionkunz/chartist-js

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2