目次
はじめに：Web画面でのデータ分析をもっと効率化
業務アプリケーションでは、 データを一覧表示するだけでなく、 計算、集計、比較、可視化まで 同じ画面で行えることが求められます。
しかし、利益率や構成比を表示するために 個別の計算処理を実装したり、 大量のチャートデータを一度に読み込んだりすると、 開発や運用の負担が大きくなります。
AG Grid 36と AG Charts 14では、 データの計算、集計、表示、可視化を 効率化する機能が利用できます。
本記事では、 Webアプリケーションのデータ分析を より柔軟にする主な機能をご紹介します。
AG Grid 36で計算・集計を効率化
数式から新しい列を作成できる計算列
計算列 （Calculated Columns）を利用すると、 元のデータソースを変更せず、 既存の列を参照した数式から 新しい列を作成できます。
例えば、次のような計算を グリッド上で行えます。
- 売上から原価を差し引いた利益
- 売上と原価から算出する利益率
- 数量と単価を掛け合わせた金額
- 予算と実績の差額
- 複数項目を組み合わせた評価値
作成した計算列にも、 通常の列と同じように 並べ替え、フィルター、グループ化などを 適用できます。
集計値を割合や差分として表示
Show Values Asを利用すると、 集計値を単純な合計だけでなく、 全体や親グループに対する割合、 または基準値との差分として表示できます。
例えば、次のような分析に活用できます。
- 全体に占める製品別売上構成比
- 部門別実績の割合
- 地域別売上の比較
- 予算と実績の差異
- 親グループ内における項目別の比率
複雑な集計ロジックを個別に用意することなく、 業務上の意味が伝わりやすい形で データを表示できます。
データから列を自動生成
Automatic Column Generationでは、 読み込んだデータの項目を基に、 グリッドの列定義を自動生成できます。
APIから返されるデータ構造が変化する場合や、 事前に項目を固定できないデータを表示する場合でも、 列を一つずつ定義する手間を抑えられます。
主に次のような画面で活用できます。
- データ構造が変化するAPIの確認画面
- ログや調査データの表示画面
- ユーザーが読み込んだデータのプレビュー
- 試作段階の管理画面やダッシュボード
- 項目が固定されていないデータ分析画面
データ内容に合わせて列を生成できるため、 動的なデータセットを扱うアプリケーションを 構築しやすくなります。
AG Charts 14で大量データを柔軟に可視化
必要な範囲のデータを非同期で取得
AG Charts 14では、 リモートAPIやページ分割されたAPIから 必要なデータを非同期で取得できます。
ユーザーがチャートをズームしたり、 表示範囲を移動したりした際に、 対象範囲のデータだけを読み込むことができます。
すべてのデータを最初に取得する必要がないため、 次のような大量データの可視化に適しています。
- 長期間の売上・取引データ
- 金融市場の時系列データ
- システムログや監視データ
- センサーや計測機器のデータ
- ページ分割された分析データ
ラベルや注釈に画像を表示
軸ラベル、データラベル、 キャプション、注釈などのテキスト要素に、 画像を組み込めます。
アイコン、国旗、ロゴ、アバターなどを表示することで、 文字だけでは判別しにくい情報も 視覚的に分かりやすく伝えられます。
BigIntとISO 8601形式に対応
高精度な整数を扱う BigIntに対応しており、 金融データや大きな数値を 精度を保ったまま可視化できます。
また、ISO 8601形式の日付・日時文字列を、 JavaScriptのDateオブジェクトへ 事前に変換せずに利用できます。
APIから取得したデータをチャート表示するまでの 前処理コードを減らし、 実装を簡素化できます。
テーマとアクセシビリティの改善
アプリケーションと配色を統一
AG Charts 14では、 CSS変数やHSLカラーを利用した 色指定に対応しています。
アプリケーション側のテーマカラーを チャートにも反映しやすく、 ライトモードやダークモードの切り替えにも 対応しやすくなります。
AG Grid 36でも、 テーマ処理のパフォーマンスや レスポンシブ表示、 カスタマイズ性が改善されています。
固定列のアクセシビリティを改善
固定列を含むグリッドでは、 スクリーンリーダー利用者向けの ナビゲーション情報が改善されています。
データ量や列数の多い業務画面でも、 現在操作している位置や列の状態を 把握しやすくなります。
まとめ
AG Grid 36では、 計算列、集計値の割合・差分表示、 データからの列自動生成により、 グリッド上でのデータ分析が より柔軟になりました。
AG Charts 14では、 非同期データ取得、画像付きラベル、 CSS変数、BigInt、ISO 8601形式への対応により、 大量で複雑なデータを 扱いやすくなっています。
AG Grid Enterpriseと AG Charts Enterpriseを組み合わせることで、 データの一覧表示から計算、集計、 チャートによる傾向分析までを、 同じWebアプリケーション内で実現できます。
React、Angular、Vue、JavaScriptを使用した 業務システム、管理画面、 SaaS製品、分析ダッシュボードなどに活用できます。
AG Grid Enterpriseの導入や ライセンスについてご不明な点がございましたら、 お気軽にお問い合わせください。
今後も、セキュリティと実務運用の両面から役立つ情報を発信してまいります。
ぜひブックマークのうえ、最新記事をお見逃しなく！