ブラウザで動作するピボットテーブルを実装するスクリプト・「WebDataRocks」

WebDataRocks

WebDataRocksはブラウザで動作するピボットテーブルを実装する事が出来るJavaScriptライブラリです。他ライブラリに以前せず単体で動作します

ピボットテーブルって何？という方は以下をご参照下さい

https://forest.watch.impress.co.jp/docs/serial/exceltips/1076187.html

forest.watch.impress.co.jp

上サンプルで数字の書かれたセルをダブルクリックすると、その数値を割り出したデータを表で確認する事が出来ます。テーブルはエクセルやHTML、PDFでエクスポートする事が可能です

ざっくり使い方

配布されているのでダウンロードして利用可能ですが、CDNも用意されています。サンプルではCDNを使っています

<link href="https://cdn.webdatarocks.com/latest/webdatarocks.min.css" rel="stylesheet"/>
<script src="https://cdn.webdatarocks.com/latest/webdatarocks.toolbar.min.js"></script>
<script src="https://cdn.webdatarocks.com/latest/webdatarocks.js"></script>

CSSとスクリプトを読み込みます

var pivot = new WebDataRocks({
	container: "#wrap",//読み込むHTML要素を指定
	toolbar: true,
	report: {
		dataSource: {
			filename: "data.csv"//CSVやJSONなどのデータファイルを読み込む
		}
	}
});

基本的な使い方です。初期化して読込先の要素を指定、データファイルを読み込めばひとまずOKです。

<div id="wrap"></div>

あとはHTML要素を用意するだけ。簡単ですね。

report: {
		dataSource: {
			filename: "data.csv"//CSVやJSONなどのデータファイルを読み込む
		}
	},
	global: {
		localization: "ja.json"//言語ファイル
	}
});

ローカライズする方法です。dataSourceの続きに言語ファイルとして作成したJSONファイルを読み込みます。日本語化はされていないので自作する必要があります。英語の言語ファイルを元に作成できるのでご参照下さい（英語ファイル:https://cdn.webdatarocks.com/loc/en.json）

更にはHighchartsやGoogle Chartsなどを使って動作サンプルのようにビジュアライズも可能です

ライセンスは独自ライセンスですが商用でも無償で利用可能です。詳しくはライセンスページをご覧ください

まとめると、商用でも無償で使えて他言語化にも対応、非依存性のピボットテーブル実装ライブラリ、という感じです。これはかなり良いのではないかと思います。

WebDataRocks