Web上でグラフを描きたいケースはとても多いです。そしてグラフは単に1種類知っておけばいいわけではなく、用途に合わせて最適なものを選ばないといけません。一つのライブラリだけで行うなら、なるべく多くの表示パターンに対応したものを使うべきでしょう。 今回紹介するbillboard.jsは一般的なグラフであれば、大抵こなせる強い味方です。覚えておくと使える場面が多そうです。

billboard.jsの使い方

主なグラフについて紹介していきます。まずは円グラフ。

オンマウスに対応しています。他のグラフも同様です。

エリアチャート。

エリアレンジチャート。

棒グラフ。

バブルチャート。

複合グラフ。

ドーナッツグラフ。

ゲージグラフ。

折れ線グラフ。

折れ線グラフですが、途中線種を変えています。

レーダーチャート。

散布図。

曲線グラフ。

積み重ねの棒グラフ。

ステップグラフ。

グリッドライン。

横棒グラフ。

スタンフォードダイアグラム。

ポイントをカスタマイズしたグラフ。

billboard.jsは表示にD3.jsを使っています。APIは分かりやすく、よくあるグラフライブラリのように複雑な指定はなさそうです。表現法はここで並べた以上にありますので、ぜひサンプルをチェックしてください。

billboard.jsはTypeScript製のオープンソース・ソフトウェア（MIT License）です。

billboard.js naver/billboard.js: Re-usable, easy interface JavaScript chart library based on D3.js