インタラクティブ通信内でグラフを使用する using-charts-in-interactive-communications

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

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

インタラクティブ通信でグラフを追加および設定 add-and-configure-chart-in-an-interactive-communication

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

グラフのプロパティを設定 configure-chart-properties

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

グラフで関数を使用 use-functions-in-chart

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

印刷用の列グラフ columnchartprint

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

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

Web 用ドーナツグラフ donutchartweb

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

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

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

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

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

Sum 関数 sum-function

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

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

Frequency 関数 frequency-function

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

例 3：Web における多系列の四象限グラフ example-multi-series-quadrant-chart-in-web

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

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