Frappe Charts - GitHub風グラフもあるSVGグラフライブラリ // MOONGIFT Archived

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

Frappe Chartsの使い方

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

折れ線グラフ。

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

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

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

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

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

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

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

GitHub風のグラフ。

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

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

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