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

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

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

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

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

インタラクティブ通信にグラフを追加して設定する

インタラクティブ通信にグラフを追加するには、次の手順を実行します。

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

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

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

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

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

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

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

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

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

   • グラフのタイプ:グラフのタイプを指定します。円グラフ、列グラフ、ドーナツグラフ、線グラフ、線と点グラフ、点グラフ、または面グラフです。

   • オブジェクトを非表示:「 」を選択すると、最終出力でグラフが非表示になります。

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

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

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

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

4. （印刷チャネルの場合のみ）「エージェント設定」で、このグラフをエージェントで使用するかどうかを指定します。「tが必須です。エージェントがこのグラフを使用する」オプションが選択されていない場合は、エージェントUIの「コンテンツ」タブにあるグラフの目のアイコンをタップして、グラフの表示/非表示を切り替えることができます。

   

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)

​​インタラクティブ通信の印刷出力の列グラフ

A. Y軸 — フォームデータモデルプロパティから取得した金額と、タイトルプロパティを金額($)に設定 B. ラベルX軸の方向を左傾に設定 C. X軸 — フォームデータモデルプロパティから取得した費用の説明と、タイトルプロパティを費用に設定

ラフ図： インタラクティブ通信のWeb出力のドーナツグラフ

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

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

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

ラフ図： 3つの「Bed and Breakfast」トランザクションを含む関数を含まない折れ線グラフ

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軸/データモデルオブジェクト* 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軸の値の平均を返します。

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

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

​​FrequencyX軸またはY軸の値の数を返します。

​​範囲X軸またはY軸の値の最大値と最小値の差を返します。

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

​​MinimumX軸またはY軸の値のうち、一方の軸にある特定の値の最小値を返します。

​​Mode他の軸にある特定の値の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ノードを作成します。

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

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

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