HTML5の表現力を活かすにはJavaScriptの活用が欠かせません。SVGやCanvasを使って図を描画することはできますが、JavaScriptを組み合わせることでよりインタラクティブにしたり、マウスイベントを使ったりできます。 今回紹介するのはbillboard.js、JavaScript製の再利用が容易なグラフライブラリです。

billboard.jsの使い方

グラフの一例です。

データをフィルタリングすると、他のデータが薄くなります。

折れ線グラフ。

タイムシリーズ。

曲線グラフ。

X軸の座標が異なるグラフ。

ステップグラフ。

エリアグラフ。

積み上げ型のエリアグラフ。

棒グラフ。

積み上げ型の棒グラフ。

散布図。

円グラフ。

ドーナッツグラフ。

ゲージグラフ。

複数のグラフの組み合わせ。

サブグラフ。

billboard.jsは表示に際してD3を使っています。そして、JavaScriptでの操作やユーザ操作を前提として作られています。データを一部非表示にしたり、追加するのも簡単に行えます。種類も折れ線、棒、曲線、円、ドーナッツ、散布と多彩です。多くの場面で役立つグラフライブラリになるでしょう。

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

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