小さいことはいいことだ。小さいグラフに特化したフリーのjsチャートライブラリ３選。

写真はうちのみーこ。

スマホでも見やすいグラフを使う機会があるプログラマ・デザイナーの皆さまへ。小さいグラフを綺麗に描画できるJavascriptのライブラリを紹介します。

1. Peity

http://benpickles.github.io/peity/

HTMLの要素をSVGの小さいチャートに変換してくれる使い易いライブラリです。これだけでパイチャートを描画できます。

<span class="pie">1/5</span>
<script>
  $("span.pie").peity("pie");
</script>

• jQueryに依存
• SVGで描画
• ライブラリ自身も小さい

2. MetricsGraphics.js

metricsgraphicsjs.org

Mozillaが開発している日付をX軸としたタイムラインチャートに特化しているライブラリです。

Javascriptでオプションを指定してチャートを描画します。

d3.json('data/fake_users1.json', function(data) {
    data = MG.convert.date(data, 'date');
    MG.data_graphic({
        title: "Line Chart",
        description: "This is a simple line chart. You can remove the area portion by adding area: false to the arguments list.",
        data: data,
        width: 600,
        height: 200,
        right: 40,
        target: document.getElementById('fake_users1'),
        x_accessor: 'date',
        y_accessor: 'value'
    });
});

オプションをオフにしていくと線だけのスパークラインも可能です。

qiita.com

• d3.jsに依存
• SVGで描画
• X軸の日付/日時を補完したり自動調節してくれる

3. jQuery Pparkline

jQuery Sparklines

jQueryを冠に付けた小ささに特化したチャートライブラリです。Sparklines（スパークライン）と銘打っていますがパイチャートやバーチャート等も揃っています。

<p>
Inline Sparkline: <span class="inlinesparkline">1,4,4,7,5,9,10</span>.
</p>
<script>
  $('.inlinesparkline').sparkline(); 
</script>

• jQueryに依存
• canvasで描画
• 3年程メンテされてないので使う時はGitHubを見て（https://github.com/gwatts/jquery.sparkline/）メンテナンスされているフォークを探して使った方が良いかも。

小さく描画するコツ

• ラインチャートなどXY軸（Axis）があるチャートは非表示にするか片方だけ表示する。
• SVG内での余白を確認して消すか小さくする。
• 凡例（Legend）があれば非表示するか、チャート外のHTMLで描画する。
• 枠で囲まれていると狭く感じるので外枠をできるだけ減らす。

まとめ

見出しを付けたりラベルを付けたりとせずに小さいチャート部分だけであれば d3.js を使って自作するのそんなに大変ではないので、お気に入りのライブラリが見つからなければ自作する方が速いかも知れません。

他にはSVGのpath/rect/polygonタグ等を使って自力でチャートを組み立てる方法もあります。

ここで挙げたライブラリで描画されたチャートをカスタマイズする時にはSVGやCanvasの仕組みを見ながら作業する事になるので、SVGやCanvasに慣れていないと大変だったりします。