「Wijmo（ウィジモ）」は業務アプリケーションの様々な要件に対応できるUI部品を備えたJavaScriptライブラリです。
WijmoにはExcelのピボットテーブルのようにデータを操作してテーブルやチャートに表示する機能を備えた「OLAP（オーラップ）」が含まれています。前回はOLAPを構成するPivotEngineコンポーネント、PivotGridコントロール、そしてPivotChartコントロールの使い方を解説しました。
今回は、上記3つのコントロールに加え、ExcelのようなパネルのUIでドラッグ&ドロップで自由にビューを作成できる「PivotPanel」コントロールを使ってデータを表示する例を紹介します。
開発環境の準備とWijmoの参照
この記事では以下の開発環境を使用します。
作成するファイルは次の3つです。
| index.html | ページ本体。ページの要素としてPivotPanel、PivotGrid、PivotChartを配置します |
|---|---|
| app.js | PivotEngine、PivotPanel、PivotGrid、PivotChartを作成するコードを記載します |
| data.js | PivotEngineに連結するデータを記載します |
OLAPの機能を使うために必要となるWijmoのモジュールなどへの参照設定は「index.html」で行います。OLAPの機能を提供する3つのファイルに加えて、PivotGridコントロールとPivotChartコントロールを使用するために、それぞれ2つのファイルを追加する必要があります。
- OLAPの基本機能
- wijmo.min.js
- wijmo.olap.min.js
- wijmo.input.min.js
- PivotGridコントロール
- wijmo.grid.min.js
- wijmo.grid.filter.min.js
- PivotChartコントロール
- wijmo.chart.min.js
- wijmo.chart.render.min.js
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Olap入門 (2)</title>
<link href="css/wijmo.min.css" rel="stylesheet"/>
<script src="scripts/wijmo.min.js"></script>
<script src="scripts/wijmo.chart.min.js"></script>
<script src="scripts/wijmo.chart.render.min.js"></script>
<script src="scripts/wijmo.grid.min.js"></script>
<script src="scripts/wijmo.grid.filter.min.js"></script>
<script src="scripts/wijmo.input.min.js"></script>
<script src="scripts/wijmo.olap.min.js"></script>
<script src="scripts/cultures/wijmo.culture.ja.min.js"></script>
<script src="scripts/app.js"></script>
<script src="scripts/data.js"></script>
</head>
<body>
<div style="display: flex">
<div>
<div id="Wijmo_PivotPanel" style="width:400px;"></div>
</div>
<div>
<div id="Wijmo_PivotGrid" style="width:640px; margin-left:10px;"></div>
<div id="Wijmo_PivotChart" style="width:640px; margin-left:10px;"></div>
</div>
</div>
</body>
</html>
PivotEngineコンポーネントを作成する
PivotEngineコンポーネントは、OLAPの機能を実現する根幹の要素です。PivotEngineコンポーネントに連結されたデータソースをPivotPanelコントロールの操作に応じて再構成し、その結果をPivotGridコントロールやPivotChartコントロールに渡します。
それでは「app.js」と「data.js」に次のようなコードを記述してPivotEngineコンポーネントを作成しましょう。ここで作成するデータは、年度ごと、店舗ごと、製品ごとの売上高で構成されています。
※ ライセンスキーを設定しない場合トライアル版を示すメッセージが表示されます。ライセンスキーの入手や設定方法についてはこちらをご覧ください。
wijmo.setLicenseKey('ここにWijmoのライセンスキーを設定します');
document.addEventListener("DOMContentLoaded", function () {
// ピボットエンジン
const ng = new wijmo.olap.PivotEngine({
autoGenerateFields: false,
itemsSource: getData(),
fields: [
{ binding: '店', header: '店舗' },
{ binding: '年', header: '年度' },
{ binding: '製品', header: '製品' },
{ binding: '売上', header: '売上' }
],
// filterFields: ['年度'],
columnFields: ['製品'],
rowFields: ['年度', '店舗'],
valueFields: ['売上']
});
ng.fields.getField('売上').format = 'n0,'; // 千単位
});function getData() {
return[
{'店': '仙台店', '年': '2020年', '製品': '冷蔵庫', '売上': 10000000},
{'店': '仙台店', '年': '2020年', '製品': '洗濯機', '売上': 12000000},
{'店': '仙台店', '年': '2020年', '製品': 'エアコン', '売上': 14000000},
{'店': '仙台店', '年': '2020年', '製品': 'テレビ', '売上': 12000000},
{'店': '仙台店', '年': '2021年', '製品': '冷蔵庫', '売上': 9000000},
{'店': '仙台店', '年': '2021年', '製品': '洗濯機', '売上': 10000000},
{'店': '仙台店', '年': '2021年', '製品': 'エアコン', '売上': 14000000},
{'店': '仙台店', '年': '2021年', '製品': 'テレビ', '売上': 15000000},
{'店': '仙台店', '年': '2022年', '製品': '冷蔵庫', '売上': 9000000},
{'店': '仙台店', '年': '2022年', '製品': '洗濯機', '売上': 11000000},
{'店': '仙台店', '年': '2022年', '製品': 'エアコン', '売上': 12000000},
{'店': '仙台店', '年': '2022年', '製品': 'テレビ', '売上': 10000000},
{'店': '関東店', '年': '2020年', '製品': '冷蔵庫', '売上': 20000000},
{'店': '関東店', '年': '2020年', '製品': '洗濯機', '売上': 18000000},
{'店': '関東店', '年': '2020年', '製品': 'エアコン', '売上': 22000000},
{'店': '関東店', '年': '2020年', '製品': 'テレビ', '売上': 18000000},
{'店': '関東店', '年': '2021年', '製品': '冷蔵庫', '売上': 16000000},
{'店': '関東店', '年': '2021年', '製品': '洗濯機', '売上': 16000000},
{'店': '関東店', '年': '2021年', '製品': 'エアコン', '売上': 18000000},
{'店': '関東店', '年': '2021年', '製品': 'テレビ', '売上': 24000000},
{'店': '関東店', '年': '2022年', '製品': '冷蔵庫', '売上': 15000000},
{'店': '関東店', '年': '2022年', '製品': '洗濯機', '売上': 15000000},
{'店': '関東店', '年': '2022年', '製品': 'エアコン', '売上': 19000000},
{'店': '関東店', '年': '2022年', '製品': 'テレビ', '売上': 16000000},
{'店': '関西店', '年': '2020年', '製品': '冷蔵庫', '売上': 14000000},
{'店': '関西店', '年': '2020年', '製品': '洗濯機', '売上': 12000000},
{'店': '関西店', '年': '2020年', '製品': 'エアコン', '売上': 18000000},
{'店': '関西店', '年': '2020年', '製品': 'テレビ', '売上': 16000000},
{'店': '関西店', '年': '2021年', '製品': '冷蔵庫', '売上': 10000000},
{'店': '関西店', '年': '2021年', '製品': '洗濯機', '売上': 10000000},
{'店': '関西店', '年': '2021年', '製品': 'エアコン', '売上': 14000000},
{'店': '関西店', '年': '2021年', '製品': 'テレビ', '売上': 18000000},
{'店': '関西店', '年': '2022年', '製品': '冷蔵庫', '売上': 12000000},
{'店': '関西店', '年': '2022年', '製品': '洗濯機', '売上': 11000000},
{'店': '関西店', '年': '2022年', '製品': 'エアコン', '売上': 15000000},
{'店': '関西店', '年': '2022年', '製品': 'テレビ', '売上': 12000000},
];
}PivotEngineコンポーネントで設定しているプロパティの機能は次のとおりです。
| プロパティ名 | 説明 |
|---|---|
| autoGenerateFields | 連結するフィールドの自動生成 |
| itemsSource | 連結するデータソース |
| fields | 連結するフィールド名 |
| columnFields | 列ヘッダに相当するフィールド名 |
| rowFields | 行ヘッダに相当するフィールド名 |
| valueFields | 値として表示するフィールド名 |
PivotEngineコンポーネントのitemsSourceプロパティに「data.js」で定義したgetDataメソッドの戻り値（JSON形式のデータ）を渡すことで、PivotEngineコンポーネントにデータを設定します。autoGenerateFieldsプロパティをtrueに設定するとfieldsプロパティには自動的にすべてのフィールド名が設定されますが、ここではfalseに設定してfieldsプロパティに明示的に各フィールド名を設定しています。
columnFieldsプロパティとrowFieldsプロパティで指定したフィールドのデータは、それぞれグリッドの列領域と行領域に表示され、valueFieldsプロパティで指定したフィールドのデータはグリッドのデータ領域に表示されます。
また、上記の「app.js」では、下記のコードを使ってデータ領域に表示する数値の書式を千単位にしています。
・・・（中略）・・・
ng.fields.getField('売上').format = 'n0,'; // 千単位
・・・（中略）・・・3つのコントロールを作成する
次に、データを操作するPivotPanelコントロール、およびデータ表示を行うPivotGridコントロールとPivotChartコントロールを作成します。
PivotPanelコントロールは、ユーザーのドラッグ&ドロップ操作に応じてPivotEngineコンポーネントのフィールドを再構成します。それによってPivotGridコントロールとPivotChartコントロールの内容を変更することができます。
PivotGridコントロールとPivotChartコントロールは、それぞれ内部でFlexGridコントロールとFlexChartコントロールを使用しています。
これらのコントロールを実装するには、前述の「app.js」のピボットエンジンの下に次のコードを追加します。
・・・（中略）・・・
// ピボットパネル
const pivotPanel = new wijmo.olap.PivotPanel('#Wijmo_PivotPanel', {
itemsSource: ng
});
// ピボットグリッド
const pivotGrid = new wijmo.olap.PivotGrid('#Wijmo_PivotGrid', {
itemsSource: ng
});
pivotGrid.columns.defaultSize = 90;
pivotGrid.rowHeaders.columns.defaultSize = 90;
// ピボットチャート
const pivotChart = new wijmo.olap.PivotChart('#Wijmo_PivotChart', {
chartType: wijmo.olap.PivotChartType.Column,
header: '売り上げ（単位：千円）',
itemsSource: ng,
showTitle: true,
showLegend: 'Always'
});
・・・（中略）・・・ここで、各コントロールのitemsSourceプロパティにはPivotEngineコンポーネント（ng）を設定しています。これによりPivotPanelコントロールを使って「data.js」の内容を再構成できるようになります。
以上の記述を追加してページを表示すると次のようになります。
表示するデータを切り替える
それでは、実際にPivotPanelコントロールを操作してPivotGridコントロールとPivotChartコントロールに表示する内容を変更してみましょう。
最初に、ドラッグ&ドロップ操作でPivotPanelコントロールの行領域にある「店舗」を列領域に移動し、列領域の「製品」を行領域に移動します。すると、行と列に表示される項目が下のように変化します。
次に、行領域に配置されている「年度」に対してフィルター操作を行って2022年のデータだけを表示するように変更します。最初に、行領域に配置されている「年度」フィールドを右クリックして次のコンテキストメニューを表示します。
コンテキストメニューの最後にある「フィールドの設定」をクリックして下のダイアログを表示します。
表示されたダイアログの「フィルター」の［編集］ボタンをクリックするとフィルターを設定するためのダイアログが表示されます。
ここで2020年と2021年のチェックを外して2022年だけがチェックされた状態にします。
［OK］ボタンをクリックするとPivotGridコントロールとPivotChartコントロールには2022年のデータだけが表示されます。
最後に、行領域の「製品」をフィルター領域にドラッグすると「年度」が非表示になります。フィルター領域に配置されたフィールドは、フィルター処理だけが有効になり、PivotGridコントロールやPivotChartコントロールに出力されることはありません。
このとき、PivotPanelコントロールのフィルター領域に配置されたフィールドは、PivotEngine コンポーネントのfilterFieldsプロパティに設定されます。
更新のタイミングを制御する
デフォルトではPivotPanel上で行った操作の結果は即座にPivotGridやPivotChartに反映されますが、ユーザーの任意のタイミングで変更を反映させたい場合は「レイアウトの更新を保留」オプションを使用します。
「レイアウトの更新を保留」オプションをチェックすると、横にある［更新］ボタンをクリックするまで更新を保留できます。
「レイアウトの更新を保留」オプションは、パネル上のUIから設定できるほか、PivotPanelクラスのdeferredUpdateプロパティからも設定できます。
今回ご紹介した各種設定は以下のデモアプリケーションでも確認できます（“Run Project”をクリックするとデモが起動します）。
今回はOLAPの基本的な機能だけを使っていますが、その他の豊富な機能については、下記のヘルプ、APIリファレンス、およびデモをご参考にしていただければと思います。
Menuコントロールの利用については以下のドキュメントも用意していますので、ここで紹介できなかった機能については、これらのドキュメントを参照していただければと思います。
- ヘルプ
https://demo.grapecity.com/wijmo/docs/Topics/OLAP/Pivot-Panel
https://demo.grapecity.com/wijmo/docs/Topics/OLAP/Pivot-Grid
https://demo.grapecity.com/wijmo/docs/Topics/OLAP/Pivot-Chart - APIリファレンス
https://demo.grapecity.com/wijmo/api/classes/wijmo_olap.pivotpanel.html
https://demo.grapecity.com/wijmo/api/classes/wijmo_olap.pivotgrid.html
https://demo.grapecity.com/wijmo/api/classes/wijmo_olap.pivotchart.html - デモ
https://demo.grapecity.com/wijmo/demos/OLAP/PivotPanel/Overview/purejs
https://demo.grapecity.com/wijmo/demos/OLAP/PivotGrid/Overview/purejs
https://demo.grapecity.com/wijmo/demos/OLAP/PivotChart/Overview/purejs
さいごに
今回はWijmoのOLAPの機能でデータを操作してグリッドやチャートに表示する方法を紹介いたしました。OLAPのグリッドやチャートはWijmoのFlexGridコントロールとFlexChartコントロールの機能を使って実現しているので、それらが持つ多くの機能を活用することができます。Excelのピボットテーブルのような操作性と高速なデータ処理を可能にするWijmoのOLAPをご検討いただけますと幸いです。
この他にもWijmoの各種コントロールの基本的な使い方や応用的な使い方の解説を連載記事として公開しています。こちらも是非ご覧ください。
製品サイトでは、Wijmoの機能を手軽に体験できるデモアプリケーションやトライアル版も公開しておりますので、こちらもご確認ください。
また、ご導入前の製品に関するご相談、ご導入後の各種サービスに関するご質問など、お気軽にお問合せください。