JavaScriptチャートライブラリを選ぶにあたって考えたこと

こんにちは、トレンド調査ラボの井上寛之（@inohiro）です。クックパッドの検索ログを基にした法人向けデータサービス「たべみる」の開発を担当しています。

本稿では、現在開発を行っているスマートフォン向けウェブアプリケーション（Rails）で採用した、 JavaScriptチャートライブラリを選定するにあたって検討した観点について述べます。また、実際に採用したライブラリと、その利用例を簡単に紹介します。

ウェブ上に無数にあるJavaScriptチャートライブラリから、最適なものを一つ選択するのはなかなか難しい作業ではないかと考えています。おそらく、これから記述する条件を満たすライブラリは数多く存在し、今回私が選択したライブラリ以上に良いものがあるのではないかと思います。「何を以って良いライブラリとするか」という議論もまた難しい話題です。そのようなライブラリについては、はてブコメントでそっと教えていただけると幸いです。

描くチャートの種類

現在開発中のアプリケーションでは、以下の二種類のチャートを描く画面がありました。

ラインチャート
スパークラインチャート

ラインチャートは、いわゆる折れ線グラフです。

スパークラインチャート（スパークラインとも）は、ラインチャートの一種です。ただし、X軸やY軸が省略されており、詳細な値はわかりません。時系列的な傾向を、ぱっと見て簡単に把握できることを目的としたチャートです。

スパークラインチャートは、以下のようにExcelなどの表計算アプリケーションで簡単に作成することができます。

linechart

ラインチャートを描くライブラリ

ラインチャートを描くライブラリを選定する際に検討した条件について述べます。

今回描くラインチャートでは、ビジネス上の要求として「Y軸（および値）を表示しない」という条件がありました。具体的な数字は示さずに、その項目の時系列的な変化を視覚的に示すためにチャートを利用したいということです。

他の条件としては、チャートライブラリに限った話ではありませんが、ドキュメントやウェブ上の閲覧できる事例は多いほうが良いでしょう。継続的にメンテナンスされていることも大切です。ソースコードが公開されていれば、おかしな挙動に対してPRを送ることもできそうです。

また、スマートフォン向けウェブアプリケーションであるため、レスポンシブであると嬉しいです。さらにはRuby Gemとして公開されていると、Railsアプリケーションから使う場合に便利です。これは、vendor/assets 以下にファイルを直接コピーするのと比較して、ライブラリの最新バージョンに追従しやすくなりますし、アプリケーション本体のソースコードもコンパクトに保てる利点があります。

少々話が脱線してしまいましたが、選定における条件をまとめると、以下のようになります。

ラインだけ表示したい
- Y軸を非表示にするオプションがある
- ツールチップを非表示にするオプションがある
扱うのが簡単
オープンソース
ドキュメントが十分にある
継続的にメンテナンスされている
商用サイトに利用しても問題のないライセンス
レスポンシブ
Ruby Gemとして公開されている（導入・管理が簡単）

この条件で、今回選んだライブラリは「Chart.js」です。ドキュメントはシンプルですが詳細であり、とりあえずのものを作ってみるのも簡単でした。レスポンシブオプションを有効にすることで、画面の横幅が変わった時に動的にグラフや背景の方眼が再描画され、画面幅が異なるスマートフォンから使うウェブアプリケーションに便利です。

また、Ruby Gemsとして公開されている（chart-js-rails）ので、 Gemfileに一行追加するだけで、すぐに利用可能です。

イマイチな点としては、ラベルを等間隔に配置するようなオプションが無いことです。

Chart.jsによるラインチャートの描画例

以下に描画の例を示します。

linechart

Gemfile

gem 'chart-js-rails'

画面

<canvas class="chart" />

データセットとグラフの作成（coffee script)
- ラベル（X軸）を等間隔に表示したかったので、偶数番目を空文字列にしています（2行目）

#= require Chart

dataSet = {
  labels: _(labels).map((label, index) => if index % 2 == 0 then '' else label),
  datasets: [
    {
      strokeColor : "#dcdcdc",
      pointColor : "#dcdcdc",
      pointStrokeColor : "#ffffff",
      data: values[1]
    },
    {
      strokeColor : "#ff9933",
      pointColor :  "#ff9933",
      pointStrokeColor : "#ffffff",
      data : values[0]
    }
  ]
}

new Chart($("#chart").get(0).getContext("2d")).Line(dataSet, {
  # -- global options --
  animation: false
  responsive: true
  scaleShowLabels: false
  showTooltips: false
  # -- line chart options --
  bezierCurve: false
  datasetFill: false
})

他の候補

Google Chart Tools
- Chart.js の方がレスポンシブ対応の面で上回ったので、今回は不採用
- chartkikという使いやすそうなGemがあります
- google_visualrを利用すると、render _chart メソッドを使って、JSを書かずにグラフが描けます
NVD3
- d3.js はカスタマイズ性が高く難しいそうですが、NVD3を使うと比較的簡単に描けるようです
- （この記事を書くことになってから知ったので、選定時は漏れていました）
morris.js
- 簡単に使えそうです。社内ツールでも使われています
- （こちらも後日になって教えてもらったため、選定時は漏れていました）

スパークラインチャートを描くライブラリ

スパークラインチャートを描くライブラリを選定するにあたって検討した内容は、実はあまりなく、商用サイトで利用しても問題ないかという点だけでした。

今回の場合は既にjQueryを使っていたので、jQueryのプラグインとして使える「Peity」を利用しました。スパークライン以外にも、かわいいパイチャート、バーチャートを描くことができます。

似たライブラリとして、「jQuery Sparklines」があります。 GitHubリポジトリを見たところ、masterへの最新のコミットが2013年9月であり、またPull Requestがかなり放置されてしまっている状態から、メンテナンスされていないと判断しました。

PeityもRuby Gem（jquery-peity-rails）として公開されています。

イマイチな点としては、HTMLタグの中に直接データを書く必要があることです。data属性に書いておいて、いい感じに指定できるとなお良い気がします。

Peity によるスパークラインチャートの描画例

以下に描画の例を示します。

Gemfile

gem 'jquery-rails'       # 必要に応じて
gem 'jquery-peity-rails'

画面

<span class="sparkline">0.13,0.17,0.22,0.30,0.41,0.85</span>

ラインチャートを作る

#= require 'jquery'
#= require 'jquery.peity'

option = {
  fill: "#ffd592"
  height: 16
  max: null
  min: 0
  stroke: "#ff9900"
  strokeWidth: 2
  width: 75
}
$('span.sparkline').peity('line', option)