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

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

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

インタラクティブ通信でグラフを追加および設定

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

1. インタラクティブ通信のサイドキックから​コンポーネント​をタップしてください。

2. グラフ​コンポーネントを次のいずれかのコンポーネントにドラッグ＆ドロップします。

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

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

   グラフのプロパティが左側のペインに表示されます。

   

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

   

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

4. チャネルタイプに基づいて グラフのプロパティ を設定します。

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

   

6. をタップして、グラフのプロパティを保存します。

   プレビュー​をタップして、グラフに関連付けられた外観とデータを表示します。編集​をタップして、グラフのプロパティを再設定します。

グラフのプロパティを設定

印刷チャネルと web チャネルのグラフを作成する際に、次のプロパティを設定します。

グラフでの関数の使用

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

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

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

平均：X 軸または Y 軸の値を指定したとき、もう一方の軸にある値の平均値を返します。

合計：X 軸または Y 軸の値を指定したとき、もう一方の軸にあるすべての値の合計を返します。

最大：X 軸または Y 軸の値を指定したとき、もう一方の軸にある値の最大値を返します。

頻度：X 軸または Y 軸の値を指定したとき、もう一方の軸にある値の個数を返します。

範囲：X 軸または Y 軸の値を指定したとき、もう一方の軸にある値の最大値と最小値の差異を返します。

中央値：X 軸または Y 軸の値を指定したとき、もう一方の軸にある値を上位の値都会の値の中央になる値を返します。

最小：X 軸または Y 軸の値を指定したとき、もう一方の軸にある値の最小値を返します。

モード：X 軸または Y 軸の値を指定したとき、もう一方の軸にある値の中で最も多く出現する値を返します。

詳しくは、例 2：折れ線グラフでの合計関数と頻度関数の適用を参照してください。

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)

   • value プロパティを追加し、カスタムの JavaScript™ 関数の完全修飾名を指定します。（必須）このプロパティの値を、カスタム関数の名前に設定します（Multiply など）。

   • jcr:description プロパティを追加し、カスタム関数の名前として表示される値を指定します。この名前が、関数ドロップダウンに表示されます。例えば、Multiply と表示されます。

   • qtip プロパティを追加し、値としてカスタム関数の簡単な説明を指定します。「関数」ドロップダウンリスト内の関数名にポインターを置くと、ここで指定した説明がツールヒントとして表示されます。

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

これで、関数がグラフで使用できるようになりました。

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

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

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

印刷用の列グラフ

これを行うには、次のプロパティを指定します。

• 名前 - グラフの名前を指定します。
• グラフのタイプ - ドロップダウンリストから「列」を選択します。
• タイトル - X 軸に「取引タイプ」を、Y 軸に「取引額」を指定します。
• データモデルオブジェクト - データモデルオブジェクトのプロパティを選択して、X 軸（支出タイプ）と Y 軸（取引額）のデータ連結を作成します。

インタラクティブ通信の印刷チャネルの列グラフ

Web 用ドーナツグラフ

これを行うには、次のプロパティを指定します。

• 名前 - グラフの名前を指定します。
• グラフのタイプ - ドロップダウンリストから「ドーナツ」を選択します。
• データモデルオブジェクト - データモデルオブジェクトのプロパティを選択して、X 軸（支出タイプ）と Y 軸（取引額）のデータ連結を作成します。
• 内半径 - 内半径の値を 150 に指定して、グラフ内の内側の円の半径（ピクセル単位）を指定します。
• ツールヒント - デフォルトの ${x}(${y}) 形式を使用してツールヒントを表示します。ツールヒントは、「支出タイプ（取引額）」として表示されます。例：ビットコインへの支払い（10000）

インタラクティブ通信の web チャネルのドーナツグラフ

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

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

「AirBnB への支払い」の取引が 2 つあり関数を持たない折れ線グラフ

Sum 関数

sum 関数を適用して、同じデータプロパティの複数のインスタンスの値を合計し、1 回だけ表示することができます。 例えば以下のグラフでは、Y 軸に Sum 関数が適用され、2 つの「AirBnB への支払い」取引の金額が合計されて（それぞれの金額は 2050 と 1050）、1 つの取引としてグラフに表示されています（合計金額は 3100）。

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

Frequency 関数

Frequency 関数は、X 軸の指定の値に対する発生数を Y 軸に返します。Frequency 関数を Y 軸（取引額）に適用すると、「AirBnB への支払い」の取引が 2 件あり、残りのタイプの取引は 1 件あることがグラフに表示されます。

例 3：Web における多系列の四象限グラフ

グラフには、特定の日付範囲で実行された取引額が示されています。四象限グラフには、グラフ領域を 4 つのラベル付きセクションに分割する機能があります。グラフの X 軸と Y 軸に、静的な基準点を使用します。多系列機能を使用すると、銀行名に基づいてデータを分離できます。

これを行うには、次のプロパティを指定します。

• 名前： グラフの名前を指定します。

• グラフタイプ： ドロップダウンリストから 四象限​を選択します。

• 「多系列」チェックボックスを選択します。

• データモデルオブジェクト：系列のデータモデルオブジェクトのプロパティを指定します。銀行名のデータモデルオブジェクトプロパティは、X 軸と Y 軸にプロットされたデータモデルオブジェクトプロパティの親です。

• データモデルオブジェクト：​データモデルオブジェクトのプロパティを選択して、X 軸（取引日）と Y 軸（取引額）のデータ連結を作成します。

• 「基準点」セクションで、連結タイプとして「静的」を選択します。

• X 軸と Y 軸の基準点の値を指定します。

• 左上、右上、右下、左下の四象限の各ラベルを指定します。

• 「凡例を表示」チェックボックスをオンにして、銀行名のカラーコードを表示します。