データ分析

データ分析とは、特定の方法でデータを検査、変換、および整理し、それに基づいて役立つ情報を生成するプロセスです。また、分析的および論理的な推論で特定の結果と結論に達することもできます。

Dock Manager のデータ分析

選択したデータに基づいて Chart Types ビューを有効にするには、セル範囲の選択または列の選択を実行します。このビューは、Dock Manager の右ペインの一部です。以下のオプションを選択できます。

• 特定のチャート タイプを選択し、別のペインで可視化します。
• または、Data Analysis コンテキスト ボタンを使用して、さまざまなテキスト書式設定オプションを表示します。

以下に注意してください。

• 新しいデータを選択すると、チャートのデータが更新されます。
• 複数セルの範囲選択が適用される場合、テキスト書式設定機能のみが利用可能になります。
• 選択したデータがいずれのチャートとも互換性がない場合、「互換性のないデータ」警告メッセージが表示されます。

Keep in mind (sample related):

• On new data selection chart data will be updated.
• If multi-cell range selection is applied, only the Text formatting functionality will be available.
• If selected data is not compatible for any of the charts - an “Incompatible data” warning message will be shown.

データ分析パッケージ

この機能を使用できるには、以下の手順を実行します。igniteui-angular-extras パッケージは プライベート npm フィード でのみ利用できます。有効な商用ライセンス がある場合、プライベート フィードにアクセスできます。

始めましょう:

• パッケージをアプリケーションにインストールします。

npm install @infragistics/igniteui-angular-extras

• パッケージのピア依存関係をインストールします。

npm install @infragistics/igniteui-angular igniteui-angular-core igniteui-angular-charts

• パッケージのインストール後、以下を実行します。
  • IgxExtrasModule を app.module.ts に追加します。
  • igxChartIntegration、igxConditionalFormatting、igxContextMenu ディレクティブをグリッドに適用します。

<igx-grid #grid1 igxChartIntegration igxConditionalFormatting igxContextMenu
    [data]="localData" [autoGenerate]="true">
    <igx-paginator>
    </igx-paginator>
</igx-grid>

以上です! セル範囲の選択を実行し、データ分析フローを実行できます。

データ分析ボタン

データ分析ボタンは、選択したデータをさまざまな方法で可視化するアウトレットです。

グリッドで実行されるすべての範囲選択をシングル クリックで簡単に分析できます。

ボタンは、選択範囲の右下にあるすべての範囲選択でレンダリングされ、選択範囲がインアクティブになると非表示になります。ボタンは、選択範囲の右下にあるすべての範囲選択でレンダリングされ、選択範囲がインアクティブになると非表示になります。

チャートと統合

このセクションでは、エンドユーザーがグリッドの選択したデータに基づいてチャートを可視化し、必要に応じて異なるチャート タイプを選択できる、チャート作成機能とグリッドの統合を紹介します。

チャートは、セルの範囲を選択し、分析の表示ボタンをクリックすると表示されます。

以下のチャート タイプをサポートします。

• 縦棒チャート、 エリア チャート、 折れ線チャート、 棒チャート、

• 積層型チャート、 積層型 100% チャート、

• 円チャート、 散布図、 バブル チャート 意味のあるバブル チャートを表示するために、データが有効な形式でない場合、プレビューを無効にします。

• Column Chart, Area Chart, Line Chart, Bar Chart,

• Stacked Chart, Stacked 100% Chart,

• Pie Chart, Scatter Chart, Bubble Chart In order to show meaningful Bubble Chart we disable the preview when the data is not in valid format.

セルの条件付き書式

グリッドに数千行のデータがある場合、生の情報を検査するだけでパターンと傾向を分析することは容易ではありません。チャートやスパークラインと同様に、条件付き書式は、データを可視化し、理解しやすくする別の方法を提供します。

条件付き書式は範囲選択の値に基づいて、色やデータ バーなどの書式設定をセルに適用できます。以下のサンプルは、グリッドを構成して条件付き書式を適用する方法を示します。どの条件ルールが表示されるかは、条件付き書式の選択タイプによって異なります。以下は定義済みスタイル (プリセット) があります。これを使用すると、条件付き書式をデータにすばやく適用できます。範囲の書式設定は、異なる範囲で書式設定を行った場合、またはクリア ボタンを使用してクリアにされます。クリア ボタンは、書式設定が適用されている場合にのみアクティブになります。

数の範囲選択

• Data Bars - データバーは、売れ筋商品や売れ残り商品など、高値と低値を識別する場合などに役立ちます。このプリセットにより、選択したセルの範囲の値を簡単に可視化できます。長いバーはより高い値を表します。値が 0 のセルにはデータバーがありません。他のすべてのセルは比例的に塗りつぶされます。正の値は緑色で、負の値は赤色です。

• Color Scale - 色の影はセルの値を表します。*最低のしきい値未満の値を保持するセルは赤色で色付けされます。*最高のしきい値を超える値を保持するセルは緑色で色付けされます。最低と最高のしきい値の間にあるすべてのセルは黄色で表示されます。

最低のしきい値 - 範囲選択の最大セル値の 33％ 未満。

最高のしきい値 - 範囲選択の最大セル値の 66％ 以上。

• Top 10% - このプリセットを使用して、選択したデータの上位 10％ に相当する値を強調表示します。

テキストの範囲選択

• Text contains - 左上に上位の選択されたセルのセル値を含むすべてのセルをマークします。例:

• Duplicate values - 重複する値をすべてマークします。
• Unique values - 一意のすべてのセル値がマークされます(青色の背景色)。
• Empty- 未定義の値のすべてのセルをマークします。

デモ

データ分析パッケージ API

IgxConditionalFormattingDirective

IgxChartIntegrationDirective

便利なリソース

• Angular Universal ガイド (英語)
• Ignite UI スタート キット (英語)
• サーバー サイド レンダリング用語
• Ignite UI を使用した作業の開始
• Ignite UI CLI ガイド
• Ignite UI for Angular Schematics ガイド