Webシステムを開発していてよく求められるのがグラフです。すでに多数のグラフライブラリがありますが、グラフの種類が物足りなかったり、使い勝手が良くない、デフォルトで生成されるグラフが作っているシステムに合わないなど様々な問題があります。 そのため、まず多数のグラフライブラリを知っておくのが大切です。その中からニーズにあったものを選びましょう。今回はContourを紹介します。

Contourの使い方

まずごく基本的な折れ線グラフ。

D3.jsと組み合わせた例。

曲線グラフ。

棒グラフ。

積み上げ型の棒グラフ。

横棒グラフ。

横でも積み上げ型。

エリアグラフ。

円グラフ、ドーナツグラフもあります。

シリーズ化した円グラフ。

散布図。

散布図+トレンド。

地図。

アメリカの地図。

CSVから読み取ることもできます。

Contourがサポートしているグラフは折れ線、曲線、円/ドーナツ、棒、エリア、散布図などになります。さらにD3.jsと組み合わせることで多数のチャートにも対応できます。描画は高速なので使い勝手が良さそうです。グラフはSVGを使っています。

ContourはHTML5/JavaScript製のオープンソース・ソフトウェア(ソースコードは公開されていますがライセンスは明記されていません)です。

Contour Overview forio/contour