グラフやグラフは、データを視覚的に表現したものです。 大量の情報を分かりやすい視覚的形式にまとめ、インタラクティブ通信の受信者は複雑なデータをより視覚化、解釈、分析できるようにします。
インタラクティブ通信を作成する際にグラフを追加することにより、インタラクティブ通信のフォームデータモデルから取得した 2 次元のデータを視覚的に表現することができます。グラフコンポーネントを使用すると、円グラフ、列グラフ、ドーナツグラフ、棒グラフ、線グラフ、線とポイントグラフ、ポイントグラフ、面グラフ、四分円グラフの各タイプを追加して設定できます。
インタラクティブ通信にグラフを追加して設定するには、次の手順を実行します。
インタラクティブ通信のサイドキックからコンポーネントをタップしてください。
グラフコンポーネントを次のいずれかのコンポーネントにドラッグ&ドロップします。
インタラクティブ通信エディターでグラフコンポーネントをタップし、コンポーネントツールバーから設定( )を選択します。
グラフのプロパティが左側のペインに表示されます。
印刷チャネルの線グラフの基本プロパティ
Web チャネルの線グラフの基本プロパティ
チャネルタイプに基づいて グラフのプロパティ を設定します。
(印刷チャネルの場合のみ)エージェント設定で、このグラフをエージェントで使用することが必須かどうかを指定します。このグラフの使用がエージェントにとって必須ですオプションを選択していない場合、エージェント UI のコンテンツタブにあるグラフの目のアイコンをタップして、グラフを表示または非表示にできます。
をタップして、グラフのプロパティを保存します。
プレビューをタップして、グラフに関連付けられた外観とデータを表示します。編集をタップして、グラフのプロパティを再設定します。
印刷チャネルと web チャネルのグラフを作成する際に、次のプロパティを設定します。
フィールド | 説明 | チャネルタイプ |
名前 | グラフ要素の識別子。このフィールドで指定されたグラフの名前は、グラフには表示されません。他のコンポーネント、スクリプト、SOM 式の要素を参照する際に使用されます。 | 印刷出力と Web 出力 |
グラフのタイプ | 生成するグラフのタイプ。使用可能なオプションには、円グラフ、列グラフ、ドーナツグラフ、棒グラフ、線グラフ、線とポイントグラフ、ポイントグラフ、領域グラフがあります。 | 印刷出力と Web 出力 |
シリーズ/複数シリーズ | X 軸と Y 軸にプロットされたフォームデータモデルコレクション項目の複数のシリーズを追加する場合に選択します。 | 印刷出力と Web 出力 |
シリーズ/データモデルオブジェクト | グラフに複数のシリーズを追加するためのフォームデータモデルコレクション項目の名前。 X 軸とY 軸にプロットされたプロパティの親フォームデータモデルオブジェクトプロパティを選択して、意味のあるシリーズを形成します。連結するデータモデルオブジェクトは、数値タイプ、文字列タイプまたは日付タイプである必要があります。 |
印刷出力と Web 出力 |
積み上げを表示 | 各系列の値を互いの上に積み上げるように選択します。 | 印刷出力と Web 出力 |
X 軸/タイトル | X 軸のタイトル。 | 印刷出力と Web 出力 |
X 軸/データモデルオブジェクト | X 軸にプロットされるフォームデータモデルのコレクションアイテムの名前。 同じ親データモデルオブジェクトの 2 つのコレクションタイププロパティまたは配列タイププロパティを選択します。これらのプロパティはグラフの X 軸と Y 軸に描画されるため、相互に関連するプロパティを選択してください。 連結するデータモデルオブジェクトは、数値タイプ、文字列タイプ、または日付タイプである必要があります。 |
印刷出力と Web 出力 |
Y 軸/タイトル | Y 軸のタイトル。 | 印刷出力と Web 出力 |
Y 軸/データモデルオブジェクト | Y 軸にプロットされるフォームデータモデルのコレクションアイテムの名前。印刷チャネルでは、Y 軸のデータモデルオブジェクトは数値タイプである必要があります。 同じ親データモデルオブジェクトの 2 つのコレクションタイププロパティまたは配列タイププロパティを選択します。これらのプロパティはグラフの X 軸と Y 軸に描画されるため、相互に関連するプロパティを選択してください。 |
印刷出力と Web 出力 |
Y 軸/関数 | Y 軸の値の計算に使用する統計関数またはカスタム関数。 | 印刷出力と Web 出力 |
オブジェクトを非表示 | 選択すると、最終的な出力でグラフが非表示になります。 | 印刷出力と Web 出力 |
タイトル | グラフのタイトル。 | 印刷出力 |
高さ | グラフの高さ(ピクセル単位)。 | 印刷出力 |
幅 | グラフの幅(ピクセル単位)。Web チャネルのグラフの幅については、スタイルレイヤーを使用するかテーマを適用して調整することができます。 | 印刷出力 |
前に必須の改ページ | 新しいページの先頭にグラフが表示されるようにグラフの前に改ページを追加する場合は、このプロパティを選択します。 | 印刷出力 |
後に必須の改ページ | 新しいページの先頭にグラフのコンテンツが表示されるようにグラフの後ろに改ページを追加する場合は、このプロパティを選択します。 | 印刷出力 |
インデント | ページの左側からのグラフのインデント。 | 印刷出力 |
ツールヒント | Web チャネルのグラフのデータポイントにマウスを置いたときに表示されるツールヒントの形式。デフォルト値は ${x}(${y}) です。グラフのタイプに応じて、グラフ内のポイント、棒、またはスライスにマウスを置くと、${x} 変数と ${y} 変数が X 軸と Y 軸の対応する値で動的に置き換えられ、ツールヒントに表示されます。 ツールチップを無効にするには、 ツールチップ フィールドが空白です。 このオプションは線グラフと領域グラフには適用できません。詳しくは、例 1:印刷と web のグラフ出力を参照してください。 |
Web |
グラフ固有の設定 | 共通の設定に加えて、次のようなグラフ固有の設定を使用できます。
|
印刷出力と Web 出力 |
統計関数を使用してグラフを設定し、ソースデータの値を計算して、グラフにプロットできるようにします。 グラフ内で関数を適用すると、フォームデータモデルでは直接指定できないデータを描画することができます。
グラフコンポーネントにはいくつかの関数が組み込まれていますが、カスタム関数を作成して、web チャネルのグラフ設定で使用することもできます。
デフォルトでは、以下の関数をグラフコンポーネントに使用できます。
平均:X 軸または Y 軸の値を指定したとき、もう一方の軸にある値の平均値を返します。
合計:X 軸または Y 軸の値を指定したとき、もう一方の軸にあるすべての値の合計を返します。
最大:X 軸または Y 軸の値を指定したとき、もう一方の軸にある値の最大値を返します。
頻度:X 軸または Y 軸の値を指定したとき、もう一方の軸にある値の個数を返します。
範囲:X 軸または Y 軸の値を指定したとき、もう一方の軸にある値の最大値と最小値の差異を返します。
中央値:X 軸または Y 軸の値を指定したとき、もう一方の軸にある値を上位の値都会の値の中央になる値を返します。
最小:X 軸または Y 軸の値を指定したとき、もう一方の軸にある値の最小値を返します。
モード:X 軸または Y 軸の値を指定したとき、もう一方の軸にある値の中で最も多く出現する値を返します。
詳しくは、例 2:折れ線グラフでの合計関数と頻度関数の適用を参照してください。
グラフでデフォルトの関数を使用する以外に、JavaScript™でカスタム関数を記述し、Web チャネルのグラフコンポーネントの関数のリストで使用できるようにします。
関数は、配列または値、およびカテゴリ名を入力として受け取り、値を返します。 次に例を示します。
Multiply(valueArray, category) {
var val = 1;
_.each(valueArray, function(value) {
val = val * value;
});
return val;
}
カスタム関数を作成したら、次の手順を実行して、グラフの設定で使用できるようにします。
関連するインタラクティブ通信に関連付けられたクライアントライブラリにカスタム関数を追加します。 詳しくは、送信アクションの設定とクライアントサイドのライブラリの使用を参照してください。
CRXDe Lite の関数ドロップダウンにカスタム関数を表示するには、以下のプロパティを指定して、apps フォルダー内に nt:unstructured
ノードを作成します。
guideComponentType
プロパティを追加し、値として fd/af/reducer
を指定します。(mandatory)
value
プロパティを追加し、カスタムの JavaScript™ 関数の完全修飾名を指定します。(必須)このプロパティの値を、カスタム関数の名前に設定します(Multiply など)。
jcr:description
プロパティを追加し、カスタム関数の名前として表示される値を指定します。この名前が、関数ドロップダウンに表示されます。例えば、Multiply と表示されます。
qtip
プロパティを追加し、値としてカスタム関数の簡単な説明を指定します。「関数」ドロップダウンリスト内の関数名にポインターを置くと、ここで指定した説明がツールヒントとして表示されます。
クリック すべて保存 をクリックして設定を保存します。
これで、関数がグラフで使用できるようになりました。
「基本」タブで、グラフのタイプ、データを格納するソースフォームデータモデルのプロパティ、グラフの X 軸と Y 軸上に描画されるラベルを指定します。必要に応じて、グラフ上に表示される値を計算するための統計関数を指定することもできます。
ここでは、インタラクティブ通信を使用して生成されたクレジットカードの取引明細を例として、基本的なプロパティに関して最低限知っておくべき情報について説明します。文内の様々な費用の量を表すグラフを生成する場合を考えてみましょう。 インタラクティブ通信の印刷出力と Web 出力に異なる種類のグラフを使用する場合。
これを行うには、次のプロパティを指定します。
インタラクティブ通信の印刷チャネルの列グラフ
これを行うには、次のプロパティを指定します。
インタラクティブ通信の web チャネルのドーナツグラフ
グラフ内で関数を適用すると、フォームデータモデルでは直接指定できないデータを描画することができます。ここでは、クレジットカードの取引明細を例として、Sum 関数と Frequency 関数をグラフに適用する方法について説明します。
「AirBnB への支払い」の取引が 2 つあり関数を持たない折れ線グラフ
sum 関数を適用して、同じデータプロパティの複数のインスタンスの値を合計し、1 回だけ表示することができます。 例えば以下のグラフでは、Y 軸に Sum 関数が適用され、2 つの「AirBnB への支払い」取引の金額が合計されて(それぞれの金額は 2050 と 1050)、1 つの取引としてグラフに表示されています(合計金額は 3100)。
同じデータプロパティで複数のインスタンスが存在する場合は、Sum 関数を適用して合計値を表示すると、グラフが見やすくなります。
Frequency 関数は、X 軸の指定の値に対する発生数を Y 軸に返します。Frequency 関数を Y 軸(取引額)に適用すると、「AirBnB への支払い」の取引が 2 件あり、残りのタイプの取引は 1 件あることがグラフに表示されます。
グラフには、特定の日付範囲で実行された取引額が示されています。四象限グラフには、グラフ領域を 4 つのラベル付きセクションに分割する機能があります。グラフの X 軸と Y 軸に、静的な基準点を使用します。多系列機能を使用すると、銀行名に基づいてデータを分離できます。
これを行うには、次のプロパティを指定します。
名前: グラフの名前を指定します。
グラフタイプ: ドロップダウンリストから 四象限を選択します。
「多系列」チェックボックスを選択します。
データモデルオブジェクト:系列のデータモデルオブジェクトのプロパティを指定します。銀行名のデータモデルオブジェクトプロパティは、X 軸と Y 軸にプロットされたデータモデルオブジェクトプロパティの親です。
データモデルオブジェクト:データモデルオブジェクトのプロパティを選択して、X 軸(取引日)と Y 軸(取引額)のデータ連結を作成します。
「基準点」セクションで、連結タイプとして「静的」を選択します。
X 軸と Y 軸の基準点の値を指定します。
左上、右上、右下、左下の四象限の各ラベルを指定します。
「凡例を表示」チェックボックスをオンにして、銀行名のカラーコードを表示します。