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

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

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

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

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

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

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

    • 印刷チャネル:ターゲット領域または画像フィールド
    • Webチャネル:パネルまたはターゲット領域
  3. インタラクティブ通信エディターでグラフコンポーネントをタップし、コンポーネントツールバーから「設定( 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 出力
タイトル グラフのタイトル。 印刷出力
高さ グラフの高さ(ピクセル単位)。 印刷出力
グラフの幅(ピクセル単位)。Web チャネルのグラフの幅については、スタイルレイヤーを使用するかテーマを適用して調整することができます。 印刷出力
前に改ページが必須 新しいページの先頭にグラフが表示されるようにグラフの前に改ページを追加する場合は、このプロパティを選択します。 印刷出力
後に必須の改ページ 新しいページの先頭にグラフのコンテンツが表示されるようにグラフの後ろに改ページを追加する場合は、このプロパティを選択します。 印刷出力
インデント ページの左からのグラフのインデント。 印刷出力
ツールヒント

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

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

Web
グラフ固有の設定

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

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

グラフでの関数の使用

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

グラフの機能

グラフコンポーネントには組み込み関数がいくつかありますが、カスタム関数を記述して、Webチャネルのグラフ設定で使用できるようにすることができます。

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

平均(平均) 一方の軸にある特定の値のX軸またはY軸の値の平均を返します。

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

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

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

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

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

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

​Mode他の軸にある特定の値の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)

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

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

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

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

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

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

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

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

印刷用の縦棒グラフ

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

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

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

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

Web用ドーナツグラフ

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

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

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

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

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

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

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

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

Sum 関数

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

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

折れ線グラフの合計

Frequency 関数

Frequency関数は、一方の軸にある特定の値のY軸の値の数を返します。 Y軸にFrequency関数(Transaction Amount)を適用すると、AirBnBトランザクションのDebitが2回発生し、残りのトランザクションが1回発生したことがグラフに表示されます。

折れ線グラフの頻度

例3:Webの複数系列の象限グラフ

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

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

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

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

  • 複数シリーズ」チェックボックスをオンにします。

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

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

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

  • X軸とY軸の参照点の値を指定します。

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

  • 凡例を表示」チェックボックスを選択して、バンク名のカラーコードを表示します。

象限グラフ

このページ