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

WebはSVG/CanvasによってWeb標準だけで高度な表現が実現できるようになりました。しかし、それを使いこなすのは大変で、多くの場合ライブラリを使って実現しているでしょう。

今回紹介するFrappe ChartsはSVGを使ってグラフ表示を行うライブラリです。

Frappe Chartsの使い方

棒グラフ。マウスオーバーで情報を追加表示できます。

折れ線グラフ。

複数シリーズ出したパターン。

折れ線グラフにグラデーション。

データを動的に追加、削除できます。

色の塗り方も変えられます。

グラフと写真などのコンテンツを連動させるタイプ。

グラフのデータを選ぶと表示が変わります。

合計の表示、平均値表示を切り替え。

GitHub風のグラフ。

離すことも、くっつけることもできます。

Frappe Chartsは縦型の棒グラフと折れ線グラフくらいでグラフのパターンとしては多くありません。ただ、他のライブラリへの依存もなく、綺麗なSVGグラフが出せるのは魅力です。目的に合えば、使いやすいグラフライブラリでしょう。

Frappe ChartsはJavaScriptのオープンソース・ソフトウェア(MIT License)です。

Frappe Charts

frappe/charts: Simple, responsive, modern SVG Charts with zero dependencies: https://frappe.github.io/charts

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2