業務で使えるJavaScriptライブラリ「グラフ/チャート編」

d3.js

オープンソース・ソフトウェア（BSD）。データの可視化ライブラリです。HTML/SVG/CSSを使ってアニメーションもサポートしたグラフ/チャートを表示します。jQueryと同じような使い勝手で高度なチャートを描けるのが特徴です。

以下はサンプルのコードで、指定されたSVGタグの色を変更します。

d3.selectAll("p").style("color", function(d, i) {
　return i % 2 ? "#fff" : "#eee";
});

SVGによる表現は多彩なので、単純なグラフやチャートと言った枠を越えた表現が実現できます。

使いこなすのはそうそう簡単ではありませんが、SVGを素のまま使うのに比べると大幅に手間は軽減されるでしょう。その上でjQueryライクにプログラマブルにSVGを扱うと言った目的に最適な選択になるはずです。

three.js

オープンソース・ソフトウェア（MIT）。WebGLを使って3Dオブジェクトを描くのに使われるライブラリです。一般的にWebGLはコードが難解で分かりづらいのですが、JavaScriptで短いコード量で3D描画が実現できます。

WebGLだけでなく、WebVRであったり、CSS3D、レイトレーシングにも対応しています。ごく基本的なコードは次のようになります。

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth /
　　　　　　　　　　　　　　　　　　　　　　　　　window.innerHeight, 0.1, 1000 );

var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );
camera.position.z = 5;

THREEというグローバルオブジェクトを使って操作していくのが基本になります。以下は別なデモですが、詳細な描画、アニメーションも実現できています。

three.jsもd3.js同様に、HTML5上で提供はされているものの、素のままでは扱いづらいWebGLをJavaScriptから使いやすくしてくれる存在です。ただしWebGLのほぼ全機能を使えるようにしているため、コード量が多くなったり、three.jsの学習コストが大きいのが欠点です。また、WebGLならではのカメラであったり、シェード、3Dといった知識も必要になります。

three.jsはWebGLを扱う上でほぼデファクトとなってきていますので、情報は数多く存在します。関連書籍も多数ありますので、three.jsからWebGLの学習をはじめるという人も多くなっています。

HighCharts

非商用に限り無料。CanvasまたはSVGを使ってグラフ/チャートを描画します。プラグイン機能があり、データエクスポートやポイントをドラッグするような拡張が提供されています。以下の画像は一例です。

主なチャートとしては、

• ラインチャート
• エリアチャート
• 棒チャート
• パイチャート
• バブルチャート
• それらの複合

となっています。また、3Dチャートであったり、ゲージチャートや地図上へのマッピング、ツリーマップ、ヒートマップもできるようになっています。チャートの種類が豊富なので、大抵の要望には適うのではないでしょうか。

使い方としてはjQueryなどと組み合わせて、

$(‘#container’).highcharts({
　/* オプション */
});

という形で渡します。オプションは多彩で、細かなカスタマイズを行えるようになっています。