スマホやタブレットに最適なグラフ描画ライブラリの紹介(オープンソース)

リソース管理システムや社内システム等のウェブUIに、バーチャートやラインチャートをシンプルに表示したい時があると思います。最近登場したツールやウェブUIを見ると、数年前と比べると格段に綺麗なグラフが表示されているのを見ると、新しく登場したチャートライブラリを使いたいという気持ちも強くなると思います。

一昔前のチャートライブラリはWindowsPC上のフルブラウザで表示される目的で提供されていましたが、今はモバイルデバイス対応でグラフが小さくても綺麗に見えるチャートライブラリや、スマホとタブレットの両方で見やすく軽量に動作する事を重視した設計のチャートライブラリも増えてきています。

本記事ではオープンソースでフリーに使えるチャートライブラリを6つ紹介します。

MetricsGraphics.js

D3.jsをベースに使った Mozilla提供のチャートライブラリです。年月表示のタイムラインを軸にしたチャートと、ラベル表示や軸表示が省スペースでもレイアウトが崩れずキレイに見えるのが特徴です。見た目はとても今風のシンプルで柔らかさのあるデザインになっています。

（MetricsGraphics.js）

ライセンス：Mozilla Public License

去年2014年ぐらいからD3.jsをベースとして利用するチャートライブラリが多数登場しました。D3.jsはデータドリブンでSVG描画を行う事が特徴で、データの扱いにフォーカスされたAPIを提供しています。プログラミングしづらい訳ではありませんが、必要データのみを引数に指定してグラフ表示を行う一般的なチャートライブラリと比べると複雑で、グラフのレイアウトや描画に関する基本的な部分の開発量が多くなります。

D3.jsの拡張ライブラリでは、この複雑な部分を共通化し、インターフェイスを目的に合わせて分かり易く設計されています。このように素のD3.jsを扱わずにグラフ描画できるチャートライブラリが去年から人気になっています。

ECharts

Baidu社が提供しているオープンソースのチャートライブラリです。ビックデータ分析で利用されるチャートが最初から含まれている事が特徴です。他にはドラッグして項目変更後のチャート再計算や、ファンネルチャート、レーダーチャートも最初から備えています。中国国内のサービスで多数採用されているようです。

（ECharts）

ライセンス：特定の名称なし(三条項BSDライセンスと同じ文章)

ライセンスはURLで明示があり特定の名称が出てきていないのですが、見た所では三条項BSDライセンスと同じ文章です。そのため比較的自由に利用する事ができ、コピーライトとライセンス条文自身の明示が求められます。

C3.js

D3.jsでグラフ化したい時に最初の選択肢に入るライブラリかも知れません。D3.jsベースのライブラリで基本的なグラフ種類をサポートしていて、APIを使ったチャートの切り替えも簡単にできます。使い方がシンプルで分かり易いため、導入の敷居が低く利用しやすいです。

（C3.js）

ライセンス：MITライセンス

dimple

このライブラリもD3.jsをベースにしています。見出しやラベルの表示も一体になったチャートが多いのが特徴でAPIも揃っておりカスタマイズも可能です。共通のデータを元に色々なチャートにトランスフォームし易い設計になっています。

（dimple）

ライセンス：MITライセンス

CHARTIST.JS

レスポンシブでアニメーションするチャート描画が特徴です。シンプルなラインチャートを効果的に見せたい場合等に向いています。JSフレームワークと連携して利用するラッパーライブラリが本体とは別で提供されており、Angular/React/Metor等から利用する事が出来ます。

（CHARTIST.JS）

ライセンス：WTFPL（フリーソフトウェア）

マイナーなWTFPLが出てきたので簡単に説明します。”DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE”の略で、好きに使ってくださいと明示するライセンスになります。パブリックドメイン扱いになるライセンスです。

Chart.js

Chart.jsを新しく使い始める事は無いかも知れませんが、HTML5ベースでの描画を行う有名なチャートライブラリの1つです。SVGベースではありません。モバイルやタブレットでのタッチ・ホバーイベントに対応していてインタラクティブなチャートを作る事が出来ます。

（Chart.js）

ライセンス：MITライセンス

要約・まとめ

ウェブUIで利用できる6つのオープンソースチャートライブラリをまとめました。2015年現在、モバイル・タブレットのデバイス向け描画ライブラリの高まりを受けてD3.jsの拡張ライブラリがメインとなってチャートライブラリが多数登場して来ています。

ほとんどのライブラリで共通ですが、細かい対応や独自機能を組み込み始めると直接D3.jsの操作が求められる等のライブラリを拡張する実装が求められます。エクセルで簡単に出来るレイアウト変更でも、チャートライブラリによっては機能提供していないため変更が難しい場合もあります。そのため開発を速くするには、APIやリファレンスに書かれている可能範囲での機能提供に収めるのがポイントになります。

今年2015年、技術とデバイスの進化に合わせて、それに特化したチャートライブラリも新しく登場してきました。自分たちのプロジェクトの特性に合ったチャートライブラリを選定しましょう。

---

本ブログは、Git / Subversion のクラウド型ホスティングサービス「tracpath(トラックパス)」を提供している株式会社オープングルーヴが運営しています。

開発の効率化をしたい！もっと便利なツールを使いたい！そんなお悩みをtracpathで解決！

「tracpath(トラックパス)」は、企業内の情報システム部門や、ソフトウェア開発・アプリケーション開発チームに対して、開発の効率化を支援し、品質向上を実現します。
さらに、システム運用の効率化・自動化支援サービスも提供しています。
”つくる情熱を支えるサービス”を提供し、まるで専属のインフラエンジニアのように、あなたのチームを支えていきます。