インタラクティブ通信内でグラフを使用する

インタラクティブ通信内でグラフを使用すると、大量の情報を、分析が簡単で理解しやすい視覚的な形式で表現することができます

表やグラフはデータを視覚的に表現します。インタラクティブ通信で大量の情報を分かりやすい視覚的な形式で表現することにより、複雑なデータを視覚的に理解して分析することができます。

インタラクティブ通信を作成する際にグラフを追加することにより、インタラクティブ通信のフォームデータモデルから取得した 2 次元のデータを視覚的に表現することができます。グラフコンポーネントを使用すると、次のタイプのグラフの追加、設定ができます。

• 円グラフ
• 列
• ドーナツグラフ
• 棒グラフ（Web チャネルの場合のみ）
• 線グラフ
• 線とポイントグラフ
• ポイントグラフ
• 領域

Interactive Communicationの追加グラフの設定

次の手順を実行して、対話型通信にグラフを追加します。

1. AEM のサイドバーにあるグラフコンポーネントを、インタラクティブ通信の印刷チャネルまたは Web チャネルにドラッグアンドドロップします。

   • 印刷チャネル:ターゲット領域と画像フィールド
   • Web チャネル：パネルとターゲット領域

   グラフコンポーネントをドロップすると、グラフ用のプレースホルダーが作成されます。

2. Interactive Communicationエディターでグラフコンポーネントをタップし、コンポーネントツールバーから​設定( )を選択します。

   グラフの基本プロパティがフォーカスされた状態で、プロパティサイドバーが表示されます。

   
   図：印刷チャネルの線の種類のグラフの 基本プロパティ

   
   図：Webチャネルーの折れ線タイプグラフの 基本プロパティ

3. 印刷チャネルと Web チャネルのグラフの基本プロパティを設定します。両方のチャネルで共通して使用されるプロパティのほかに、各チャネル固有のプロパティとグラフタイプ固有のプロパティも用意されています。

   • 名前:グラフオブジェクトの名前。ここで指定するグラフの名前は、グラフの出力には表示されませんが、グラフを参照するルールで使用されます。

   • グラフの種類:グラフのタイプを指定します。円グラフ、列グラフ、ドーナツグラフ、線グラフ、線グラフ、線とポイントグラフ、ポイントグラフ、または領域グラフです。

   • オブジェクトを非表示:最終出力でグラフを非表示にする場合に選択します。

   • X 軸​と Y 軸​で、以下のプロパティを指定します。

     • タイトル:対話型通信に表示するX軸とY軸のタイトルを指定します。
     • データモデルオブジェクト*：インタラクティブ通信の作成時に指定したフォームデータモデルの X 軸と Y 軸について、データモデルオブジェクトを参照して選択します。グラフのX軸とY軸にプロットするために、互いに関連して意味のある、同じ親データモデルオブジェクトの2つのコレクション型/配列型プロパティを選択します。
     • 関数:統計関数を使用して軸の値を計算するには、X/Y軸の関数を選択します。関数の詳細については、グラフと例2で関数を使用するを参照してください。折れ線グラフにおける和関数と平均関数の適用
   メモ

   印刷チャネルの X 軸でデータモデルオブジェクトを連結する場合、そのデータモデルオブジェクトのデータタイプは、Number、String、Date のいずれかでなければなりません。印刷チャネルの Y 軸でデータモデルオブジェクトを連結する場合、そのデータモデルオブジェクトのデータタイプは Number でなければなりません。印刷チャネルの右側に表示されている凡例を使用することをお勧めします。

   グラフのプロパティの詳細については、「グラフの基本プロパティ」を参照してください。

4. （印刷チャネルの場合のみ）「エージェント設定」で、このグラフをエージェントで使用するかどうかを指定します。「Is Mandatory For the Agent To Use This Chart」オプションが選択されていない場合、エージェントUIの「Content」タブにあるグラフの目のアイコンをタップすると、グラフを表示/非表示にできます。

   

5. プロパティサイドバーで、をタップします。

   グラフのプレビューを表示して、グラフの外観とデータを確認します。必要な場合は、グラフのプロパティをさらに編集します。

6. インタラクティブ通信の編集画面に戻り、必要な変更を行います。

例 1：印刷チャネルと Web チャネルのグラフ出力

「基本」タブで、グラフのタイプ、データを格納するソースフォームデータモデルのプロパティ、グラフの X 軸と Y 軸上に描画されるラベルを指定します。必要に応じて、グラフ上に表示される値を計算するための統計関数を指定することもできます。

ここでは、インタラクティブ通信を使用して生成されたクレジットカードの取引明細を例として、基本的なプロパティに関して最低限知っておくべき情報について説明します。具体的な例として、取引明細に記載されている様々な支払額を描画するグラフを生成する場合を考えてみます。この例では、インタラクティブ通信の印刷出力と Web 出力で、異なるタイプのグラフを使用します。

最初に、以下のプロパティを指定する必要があります。

• グラフのタイプ：この例では、印刷チャネルで列グラフを生成し、Web チャネルでドーナツグラフを生成します。

• データモデルオブジェクト：グラフの X 軸と Y 軸上に描画されるデータの取得元を指定します。この例では、X 軸に支払額を表示し、Y 軸に支出項目名を表示します。

• タイトル：X 軸と Y 軸のタイトルを指定します（この例では、印刷チャネルの列グラフでのみ、このオプションを指定します）。この例では、X 軸のタイトルを「Amount ($)」、Y 軸のタイトルを「Expense」とします。

• ラベルの方向 (この例では印刷チャネルの列タイプのグラフのみ) — この例では Tilt Left

• 経費の上にマウスを置くと表示される ツールチップ(Webチャネルのみ) — この例 ${x}: $ ${y}では、 [Expense Label: $ Amount] (例：テーマパーク訪問：$ 315)

CommunicationFigureの印刷出力の列グラフ：Interactive Communicationの印刷出力の列グラフ

A. Y軸 — フォームデータモデルのプロパティから取得した金額、およびタイトルプロパティが金額($)に設定された 金額($) B. Label Direction of X-axis set to Tilt Left C.X Axis — フォームデータモデルのプロパティから取得した費用の説明、タイトルプロパティが経費に設定された

CommunicationFigureのWeb出力におけるドーナツグラフ：Interactive CommunicationのWeb出力における ドーナツグラフ

A.ドーナツの 内側の半径プロパティが設定されてい ます。 B. 凡例を表示プロパティが選択され、凡例の位置プロパティが右 Cに設定されています。ツールチップには、マウスを合わせたときの項目の詳細が表示されます。ツールチップは${x}に設定されます。$

例 2: 線グラフ内で Sum 関数と Frequency 関数を適用する

グラフ内で関数を適用すると、フォームデータモデルでは直接指定できないデータを描画することができます。この例では、クレジットカード明細の例を使用して、合計と頻度の関数をグラフに適用する方法を理解します。

トランザクションを含む関数を含まない 折れ線グラフ

Sum 関数

Sum 関数を適用することにより、同じデータプロパティの複数のインスタンスの値を合計し、グラフ上で 1 つの項目として表示することができます。例えば以下のグラフの場合、Y 軸に Sum 関数を適用すると、3 つの「Bed and Breakfast」項目の金額が合計され（それぞれの金額は、99.45 ドル、78 ドル、12 ドル）、1 つの項目としてグラフに表示されます（合計金額は 189.45 ドル）。

同じデータプロパティで複数のインスタンスが存在する場合は、Sum 関数を適用して合計値を表示すると、グラフが見やすくなります。

Frequency 関数

Frequency 関数をグラフに適用すると、X 軸に表示される項目の発生数が Y 軸に表示されます（またはその逆）。例えば、Frequency 関数を Y 軸に適用する（Amount/TransAmount）と、「Bed and Breakfast」項目の値が Y 軸上で「3」として表示され、残りの項目についてはすべて「1」として表示されます。

グラフの基本プロパティ

「基本」タブでは、次のプロパティを設定できます。

​​名前グラフ要素の識別子。ここで指定した名前はグラフには表示されませんが、他のコンポーネント、スクリプト、SOM 式を参照する際にこの名前を使用すると便利です。

タイトル(印刷チャネルのみ) グラフのタイトルを指定します。

グラフの 種類生成するグラフの種類を指定します。有効なオプションは、円グラフ、列グラフ、ドーナツグラフ、棒グラフ（Web チャネルの場合のみ）、線グラフ、線とポイントグラフ、ポイントグラフ、領域グラフです。詳しくは、例1を参照してください。印刷およびWebでのグラフの出力。

X軸/ タイトルX軸のタイトルを指定します。

X軸/データモデルオブジェクトキャスト(&A);X軸にプロットするフォームデータモデルコレクション項目の名前を 指定します。

X軸/ 関数x軸の値の計算に使用する統計/カスタム関数を指定します。関数の詳細については、「グラフでの関数の使用」および例2を参照してください。折れ線グラフでの合計関数と平均関数の適用

X軸/ラベルの 方向印刷チャネルのグラフ上のラベルの方向。ラベルの方向を[カスタム回転]として選択すると、[カスタム回転角度（度）]フィールドが表示されます。 「カスタム回転の角度（度）」フィールドでは、回転角度を 15 度単位で選択することができます。

Y軸/ タイトルY軸のタイトルを指定します。

Y軸/データモデルオブジェクトキャスト；Y軸にプロットするフォームデータモデルコレクション項目を 指定します。印刷チャネルでは、Y軸のデータモデルオブジェクトのタイプは数値である必要があります。

Y軸/ 関数Y軸の値の計算に使用する統計/カスタム関数を指定します。関数の詳細については、「グラフでの関数の使用」および例2を参照してください。折れ線グラフでの合計関数と平均関数の適用

凡例を表示 有効な場合、円グラフまたはドーナツグラフの凡例を表示します。

凡例の 位置グラフを基準にした凡例の位置を指定します。使用できるオプションは、右端、左端、上、下です。

高さ(印刷チャネルのみ)グラフの 高さ（ピクセル単位）。

幅(印刷チャネルのみ)グラフの 幅（ピクセル単位）。

ツールチップ(Webチャネルのみ)Webチャネルーのグラフ内のデータポイントにマウスを置くと表示されるツールチップの形式を 指定します。デフォルト値は${x}(${y})です。 グラフのタイプに応じて、グラフ内のポイント、棒、スライスにマウスを置くと、変数${x}と${y}がx軸とy軸の対応する値に動的に置き換えられ、ツールチップに表示されます。

ツールヒントを無効にするには、「ツールヒント」フィールドを空白にします。このオプションは線グラフと領域グラフには適用できません。例えば、例1:印刷時のグラフ出力とWeb。

CSSクラス(Webチャネルのみ) CSSクラスの名前を「CSSクラス」フィールドに指定し、カスタムスタイルをグラフに適用します。

前に必須の改ページ(印刷チャネルのみ) 必須の改ページをグラフの前に追加し、グラフを新しいページの先頭に配置する場合に選択します。

後に必須の改ページ(印刷チャネルのみ) 選択すると、グラフの後に必須の改ページが追加され、グラフの後ろの内容が新しいページの先頭に配置されます。

インデント(印刷チャネルのみ) ページの左側のグラフのインデントを指定します。

グラフ固有の 設定一般的な設定に加え、次のグラフ固有の設定を使用できます。

• 内半径：ドーナツグラフで使用できます。グラフ内の内側の円の半径をピクセルで指定できます。

• 線の色：線グラフ、線とポイントグラフ、領域グラフで使用できます。グラフ内の線の色を 16 進値で指定できます。

• 点の色:ポイントグラフと線グラフとポイントグラフで使用でき、グラフ内のポイントの色を16進値で指定できます。

• 領域の色:面グラフで使用できます。グラフ内の線の下の領域の色を16進値で指定できます。

グラフでの関数の使用

統計関数を使用するようにグラフを設定し、ソースデータの値を計算して、グラフにプロットできます。グラフ内で関数を適用すると、フォームデータモデルでは直接指定できないデータを描画することができます。

グラフコンポーネントにはいくつかの関数が組み込まれていますが、自分で関数を作成し、その関数を使用して Web チャネルのグラフを設定することもできます

デフォルトの関数

デフォルトでは、以下の関数をグラフコンポーネントに使用できます。

平均（平均） 一方の軸にある特定の値のX軸またはY軸の値の平均を返します。

​​合計一方の軸にある特定の値のX軸またはY軸のすべての値の合計を返します。

最 大一方の軸にある特定の値のX軸またはY軸の最大値を返します。

[ 頻度]一方の軸にある特定の値のX軸またはY軸の値の数を返します。

​​範囲一方の軸にある特定の値のX軸またはY軸の最大値と最小値の差を返します。

中央値X軸または Y軸の値を上半分と下半分に分ける値を返します。

[ 最小値]一方の軸にある特定の値のX軸またはY軸の最小値を返します。

[ モード]他の軸にある特定の値のX軸またはY軸で最も多く出現する値を返します

Webチャネルのカスタム関数

グラフでデフォルトの関数を使用するだけでなく、JavaScript™ でカスタム関数を作成し、Web チャネル用のグラフコンポーネントの関数リストにその関数を追加することもできます。

関数は入力された配列または値、カテゴリ名を使用して、値を返します。次に例を示します。

Multiply(valueArray, category) {
 var val = 1;
 _.each(valueArray, function(value) {
 val = val * value;
 });
 return val;
}

カスタム関数を作成したら、以下を実行してグラフの設定で使用できるようにします。

1. 該当するインタラクティブ通信に関連付けられているクライアントライブラリにカスタム関数を追加します。詳しくは、送信アクションの設定およびクライアント側ライブラリの使用を参照してください。

2. 関数ドロップダウンにカスタム関数を表示するには、CRXDe Liteで、次のプロパティを持つappsフォルダーにnt:unstructuredノードを作成します。

   • fd/af/reducerの値を持つ追加プロパティguideComponentType。 (mandatory)
   • プ追加ロパティvalueをカスタムJavaScript™関数の完全修飾名に設定します。 （必須）に設定し、その値をMultiplyなどのカスタム関数の名前に設定します。
   • 「追加関数」ドロップダウンに表示されるカスタム関数の名前として表示する値を持つプロパティjcr:description。 例えば、Multiply と表示されます。
   • カスタム関数の追加短い説明となる値を持つプロパティqtip。 「関数」ドロップダウンリスト内の関数名にポインターを置くと、ここで指定した説明がツールヒントとして表示されます。

3. 「すべて保存」をクリックして設定を保存します。

これで関数をグラフで使用できるようになります。