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

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

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

Interactive Communicationの追加グラフの設定

次の手順を実行して、対話型通信でグラフを追加および設定します。

  1. 対話型通信のサイドキックから​コンポーネント​をタップします。

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

    • 印刷チャネル:ターゲット領域または画像フィールド
    • Webチャネル:パネルまたはターゲット領域
  3. Interactive Communicationエディターでグラフコンポーネントをタップし、コンポーネントツールバーから「設定( configure_icon)」を選択します。

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

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

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

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

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

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

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

    chart_agentproperties

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

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

グラフのプロパティを構成

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

フィールド 説明 チャネルタイプ
名前 グラフ要素の識別子。 このフィールドで指定したグラフの名前は、グラフに表示されません。 他のコンポーネント、スクリプト、SOM式の要素を参照する場合に使用されます。 印刷出力と Web 出力
グラフのタイプ 生成するグラフのタイプ。 円グラフ、列グラフ、ドーナツグラフ、棒グラフ、線グラフ、線とポイントグラフ、点グラフ、領域グラフのオプションを使用できます。 印刷出力と Web 出力
系列/複数系列 X軸とY軸にプロットされたフォームデータモデルのコレクション項目に対して複数のシリーズを追加する場合に選択します。 印刷出力と Web 出力
系列/データモデルオブジェクト グラフに複数のシリーズを追加するフォームデータモデルのコレクション項目の名前。
X軸とY軸にプロットされたプロパティに対して親フォームデータモデルオブジェクトプロパティを選択し、意味のある系列を作成します。連結するデータモデルオブジェクトは、数値、文字列、または日付型である必要があります。
印刷出力と Web 出力
積み上げを表示 各系列の値を互いの上に積み上げるように選択します。 印刷出力と Web 出力
X 軸/タイトル X軸のタイトル。 印刷出力と Web 出力
X軸/データモデルオブジェクト

X軸にプロットするフォームデータモデルのコレクション項目の名前。

グラフのX軸とY軸にプロットするために、互いに関連して意味のある、同じ親データモデルオブジェクトの2つのコレクション型/配列型プロパティを選択します。 連結するデータモデルオブジェクトは、数値、文字列、または日付型である必要があります。

印刷出力と Web 出力
Y 軸/タイトル Y軸のタイトル。 印刷出力と Web 出力
Y軸/データモデルオブジェクト

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

グラフのX軸とY軸にプロットするために、互いに関連して意味のある、同じ親データモデルオブジェクトの2つのコレクション型/配列型プロパティを選択します。

印刷出力と Web 出力
Y 軸/関数 y軸の値の計算に使用する統計/カスタム関数。 印刷出力と Web 出力
オブジェクトを非表示 最終出力でグラフを非表示にする場合に選択します。 印刷出力と Web 出力
title(タイトル) グラフのタイトル。 印刷出力
高さ グラフの高さ(ピクセル単位)。 印刷出力
グラフの幅(ピクセル単位)。Web チャネルのグラフの幅については、スタイルレイヤーを使用するかテーマを適用して調整することができます。 印刷出力
前の必須改ページ 新しいページの先頭にグラフが表示されるようにグラフの前に改ページを追加する場合は、このプロパティを選択します。 印刷出力
後に必須の改ページ 新しいページの先頭にグラフのコンテンツが表示されるようにグラフの後ろに改ページを追加する場合は、このプロパティを選択します。 印刷出力
インデント ページの左側からのグラフのインデント。 印刷出力
ツールヒント

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

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

Web
グラフ固有の設定

共通の設定に加えて、次のようなグラフ固有の設定を使用できます。

  • 凡例を表示: 有効な場合、円グラフまたはドーナツグラフの凡例を表示します。
  • 凡例の位置: グラフを基準にした凡例の位置を指定します。使用できるオプションは、右端、左端、上、下です。印刷チャネルでは、右側の凡例を使用することをお勧めします。
  • 内側の半径:ドーナツグラフで使用でき、グラフ内の内側の円の半径をピクセル単位で指定できます。
  • 線の色:線グラフ、線と点グラフ、領域グラフで使用でき、グラフ内の線の色を指定できます。
  • 点の色:点グラフ、線グラフ、点グラフで使用でき、グラフ内の点の色を指定できます。
  • 領域の色:面グラフで使用でき、グラフ内の線の下の領域の色を指定できます。
  • 基準点/連結の種類: 四半円点グラフで使用 でき、基準点の連結タイプを指定できます。参照点の値を定義するには、スタティックテキストまたはデータモデルオブジェクトプロパティを使用します。
  • 基準点/X軸: [バインディングタイプ]ドロップダウンリストから[ 静的]を選択して、基準点のX軸の値を指定した場合に、象限グラフで使用できます。
  • 基準点/Y軸: [バインディングタイプ]ドロップダウンリストから[ 静的]を選択して、基準点のY軸値を指定した場合に、象限グラフで使用できます。
  • 基準点/シリーズのデータモデルオブジェクト: [連結タイプ]ドロップダウンリストで[ データモデル オブジェクト]を選択した場合は、複数のシリーズの象限グラフで使用できます。基準点の系列を特定するためのフォームデータモデルオブジェクトのプロパティを定義してください.
  • 「基準点」(Reference Point) > 「データモデルオブジェクトのシリーズ値」(Data Model Object Value for Series): [連結タイプ]ドロップダウンリストで[ データモデル オブジェクト]を選択した場合は、複数のシリーズの象限グラフで使用できます。系列のフォームデータモデルオブジェクトプロパティと、このフィールドで定義された値を使用して、参照点の系列を識別します。
  • 基準点/基準点のデータモデルオブジェクト: [バインディングタイプ]ドロップダウンリストから[ データモデル オブジェクト]を選択した場合は、象限グラフで使用できます。X軸とY軸にプロットされるプロパティの兄弟であるフォームデータモデルオブジェクトプロパティを定義します。 さらに、複数のシリーズに対して、シリーズに対して定義されたデータモデルオブジェクトプロパティの子エンティティであるデータモデルオブジェクトプロパティを定義します。
  • 基準点/基準点のデータモデルオブジェクト値: [バインディングタイプ]ドロップダウンリストから[ データモデル オブジェクト]を選択した場合は、象限グラフで使用できます。グラフの基準点を指定するには、参照点のフォームデータモデルオブジェクトプロパティと、このフィールドで定義された値を使用します。
    象限ラベル/左上:象限グラフで 使用できるのは、左上象限の名前を指定する場合です。
  • 象限ラベル/右上:象限グラフで 使用でき、右上の象限の名前を指定できます。
  • 象限ラベル/右下: 右下の象限の名前を指定するには、象限グラフで使用できます。
  • 象限ラベル/左下: 左下の象限の名前を指定するには、象限グラフで使用できます。
印刷出力と 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ノードを作成します。

    • fd/af/reducerの値を持つ追加プロパティguideComponentType。 (mandatory)

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

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

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

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

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

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

「基本」タブで、グラフのタイプ、データを含むソースフォームデータモデルのプロパティ、グラフのX軸とY軸にプロットするラベル、およびオプションでグラフにプロットする値を計算する統計関数を定義します。

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

印刷用の列グラフ

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

  • 名前 — グラフの名前を指定します。
  • グラフのタイプ — ドロップダウンリストから ​「列」を選択します。
  • タイトル - X軸の費用タイプとY軸の取引金額を指定します。
  • データ・モデル・オブジェクト :データ・モデル・オブジェクトのプロパティを選択し、X軸(経費タイプ)とY軸(取引金額)のデータ連結を作成します。

対話型通信の印刷チャネルの列グラフ

対話型通信の印刷チャネルの列グラフ

Web用ドーナツグラフ

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

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

対話型コミュニケーションのウェブチャネルにおけるドーナツグラフ

対話型コミュニケーションのウェブチャネルにおけるドーナツグラフ

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

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

2つの「AirBnBの借方」トランザクションを含む関数のない折れ線グラフ

2つの「AirBnBの借方」トランザクションを含む関数のない折れ線グラフ

Sum 関数

Sum 関数を適用することにより、同じデータプロパティの複数のインスタンスの値を合計し、グラフ上で 1 つの項目として表示することができます。例えば、次のグラフでは、Sum関数がY軸に適用され、AirBnBトランザクションの2つの借方(2050と1050)の金額が合計され、1つのトランザクション(3100)のみが表示されます。

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

折れ線グラフの合計

Frequency 関数

一方の軸にある特定の値のY軸の値の数を返します。 Y軸(取引金額)の頻度関数を適用すると、AirBnB取引の借方の2回の値と、残りの取引タイプの1回の値がグラフに表示されます。

折れ線グラフの頻度

例3:Webのマルチシリーズ象限グラフ

グラフには、特定の日付範囲で実行された取引の金額が表示されます。 象限グラフでは、グラフ領域を4つのラベル付きのセクションに分割できます。 文字は、X軸とY軸に静的な基準点を使用します。 複数シリーズ機能を使用して、銀行名に基づいてデータを分類します。

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

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

  • グラフのタイプ:ドロップダウン リストから「 ​Quadrant」を選択します。

  • 複数シリーズ」チェックボックスを選択します。

  • Data Model Object:シリーズのデータモデルオブジェクトプロパティを指定します。バンク名のデータモデルオブジェクトプロパティは、X軸とY軸にプロットされたデータモデルオブジェクトプロパティの親です。

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

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

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

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

  • 凡例を表示」チェックボックスを選択して、銀行名の色コードを表示します。

象限グラフ

このページ