Skip to content

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

by : 2016/03/22

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({
 /* オプション */
});

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

From → HTML5

コメントは停止中です。

%d人のブロガーが「いいね」をつけました。