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

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

インタラクティブ通信を作成する際にグラフを追加することにより、インタラクティブ通信のフォームデータモデルから取得した 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 軸の基準点の値を指定します。

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

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

Business.Adobe.com リソース

Auto Text Summarization Mobile Forms Responsive Forms Document Generation Dynamic Forms Digital Asset Management