現在表示中:

インタラクティブ通信内でグラフを使用すると、大量の情報を、分析が簡単で理解しやすい視覚的な形式で表現することができます

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

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

  • 円グラフ

  • ドーナツグラフ
  • 棒グラフ(Web チャネルの場合のみ)
  • 線グラフ
  • 線とポイントグラフ
  • ポイントグラフ
  • 領域グラフ

インタラクティブ通信でのグラフの追加と設定

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

  1. AEM のサイドバーにあるグラフコンポーネントを、インタラクティブ通信の印刷チャネルまたは Web チャネルにドラッグアンドドロップします。

    • 印刷チャネル:ターゲット領域  と画像フィールド
    • Web チャネル:パネルとターゲット領域

    グラフコンポーネントをドロップすると、グラフ用のプレースホルダーが作成されます。  

  2. インタラクティブ通信エディターでグラフコンポーネントをタップし、コンポーネントツールバーで「設定()」を選択します。

    グラフの基本プロパティがフォーカスされた状態で、プロパティサイドバーが表示されます。 

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

  3. 印刷チャネルと Web チャネルのグラフの基本プロパティを設定します。両方のチャネルで共通して使用されるプロパティのほかに、各チャネル固有のプロパティとグラフタイプ固有のプロパティも用意されています。  

    • 名前*:グラフオブジェクトの名前を指定します。ここで指定したグラフ名は、出力されるグラフには表示されませんが、グラフを参照するルール内で使用されます。
    • グラフのタイプ:グラフのタイプ(円グラフ、列グラフ、ドーナツグラフ、線グラフ、線とポイントグラフ、ポイントグラフ、領域グラフ)を指定します。  
    • オブジェクトを非表示:これを選択すると、最終的な出力でグラフが非表示になります。   
    • X 軸Y 軸で、以下のプロパティを指定します。
      • タイトル:インタラクティブ通信内で表示する X 軸と Y 軸のタイトルを指定します。
      • データモデルオブジェクト*:インタラクティブ通信の作成時に指定したフォームデータモデルの X 軸と Y 軸について、データモデルオブジェクトを参照して選択します。次に、同じ親データモデルオブジェクトの 2 つのコレクションタイププロパティまたは配列タイププロパティを選択します。これらのプロパティはグラフの X 軸と Y 軸上に描画されるため、相互に関連するプロパティを選択してください。   
      • 関数:統計関数を使用して X 軸または Y 軸の値を計算する場合は、X 軸または Y 軸用の関数を選択します。関数の詳細については、「グラフでの関数の使用」と「例 2:線グラフ内で Sum 関数と Frequency 関数を適用する」を参照してください。

    注意:

    印刷チャネルの X 軸でデータモデルオブジェクトを連結する場合、そのデータモデルオブジェクトのデータタイプは、Number、String、Date のいずれかでなければなりません。印刷チャネルの Y 軸でデータモデルオブジェクトを連結する場合、そのデータモデルオブジェクトのデータタイプは Number でなければなりません。印刷チャネルの右側に表示されている凡例を使用することをお勧めします。 

    グラフプロパティの詳細については、「グラフの基本プロパティ」を参照してください。

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

    Chart_AgentProperties
  5. プロパティサイドバーで アイコンをタップします。

    グラフのプレビューを表示して、グラフの外観とデータを確認します。必要な場合は、グラフのプロパティをさらに編集します。 

  6. インタラクティブ通信の編集画面に戻り、必要な変更を行います。 

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

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

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

最初に、以下のプロパティを指定する必要があります。

  • グラフのタイプ:この例では、印刷チャネルで列グラフを生成し、Web チャネルでドーナツグラフを生成します。
  • データモデルオブジェクト:グラフの X 軸と Y 軸上に描画されるデータの取得元を指定します。この例では、X 軸に支払額を表示し、Y 軸に支出項目名を表示します。
  • タイトル:X 軸と Y 軸のタイトルを指定します(この例では、印刷チャネルの列グラフでのみ、このオプションを指定します)。この例では、X 軸のタイトルを「Amount ($)」、Y 軸のタイトルを「Expense」とします。
  • ラベルの方向:(この例では、印刷チャネルの列グラフでのみ、このオプションを指定します)この例では、「左に傾ける」を選択します。
  • ツールヒント:支出項目にマウスを置いたときに表示されるヒントを入力します(この例では、Web チャネルのドーナツグラフでのみ、このオプションを指定します)。この例では、「${x}: $ ${y}」と指定します。この場合、「Expense Label: $ Amount」という形式でツールヒントが表示されます(この例では、「Theme Park Visit: $ 315」と表示されます)。
インタラクティブ通信の印刷出力の列グラフ
インタラクティブ通信の印刷出力の列グラフ

A. Y 軸には、フォームデータモデルのプロパティから取得された金額が表示され、Y 軸のタイトルとして、「タイトル」プロパティで指定した「Amount ($)」が表示されます。 B. 「ラベルの方向」プロパティで「左に傾ける」を選択したため、X 軸のラベルが左上がりになっています。 C. X 軸には、フォームデータモデルのプロパティから取得された支出項目名が表示され、X 軸のタイトルとして、「タイトル」プロパティで指定した「Expense」が表示されます。 
インタラクティブ通信の Web 出力のドーナツグラフ
インタラクティブ通信の Web 出力のドーナツグラフ

A. ドーナツグラフの「内半径」プロパティが設定されています。 B. 「凡例を表示」プロパティが選択され、「凡例の位置」プロパティが「右」に設定されています。 C. この支出項目にマウスを置くと、この項目に関するツールヒントが表示されます。ツールヒントは、「${x}: $ ${y}」に設定されています。 

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

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

3 つの「Bed and Breakfast」項目が表示された、関数が適用されていない線グラフ
3 つの「Bed and Breakfast」項目が表示された、関数が適用されていない線グラフ

Sum 関数

Sum 関数を適用することにより、同じデータプロパティの複数のインスタンスの値を合計し、グラフ上で 1 つの項目として表示することができます。例えば以下のグラフの場合、Y 軸に Sum 関数を適用すると、3 つの「Bed and Breakfast」項目の金額が合計され(それぞれの金額は、99.45 ドル、78 ドル、12 ドル)、1 つの項目としてグラフに表示されます(合計金額は 189.45 ドル)。 

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

creditcardchartsumfunctioncopy

Frequency 関数

Frequency 関数をグラフに適用すると、X 軸に表示される項目の発生数が Y 軸に表示されます(またはその逆)。例えば、Frequency 関数を Y 軸に適用する(Amount/TransAmount)と、「Bed and Breakfast」項目の値が Y 軸上で「3」として表示され、残りの項目についてはすべて「1」として表示されます。 

creditcardchartfrequencyfunctioncopy

グラフの基本プロパティ

「基本」タブでは、次のプロパティを設定できます。

名前

グラフ要素の識別子となる名前を指定します。ここで指定した名前はグラフには表示されませんが、他のコンポーネント、スクリプト、SOM 式を参照する際にこの名前を使用すると便利です。

タイトル(印刷チャネルの場合のみ)

グラフのタイトルを指定します。 

グラフのタイプ

生成するグラフのタイプを指定します。有効なオプションは、円グラフ、列グラフ、ドーナツグラフ、棒グラフ(Web チャネルの場合のみ)、線グラフ、線とポイントグラフ、ポイントグラフ、領域グラフです。詳しくは、「例 1:印刷チャネルと Web チャネルのグラフ出力」を参照してください。

X 軸/タイトル

X 軸のタイトルを指定します。

X 軸/データモデルオブジェクト*

X 軸に表示されるフォームデータモデルのコレクションアイテムの名前を指定します。 

X 軸/関数

X 軸に表示される値を計算するための統計関数またはカスタム関数を指定します。関数の詳細については、「グラフでの関数の使用」と「例 2:線グラフ内で Sum 関数と Frequency 関数を適用する」を参照してください。

X 軸/ラベルの方向

印刷チャネルのグラフに表示されるラベルの方向を指定します。ラベルの方向として「カスタム回転」を選択すると、「カスタム回転の角度(度)」フィールドが表示されます。「カスタム回転の角度(度)」フィールドでは、回転角度を 15 度単位で選択することができます。

Y 軸/タイトル

Y 軸のタイトルを指定します。 

Y 軸/データモデルオブジェクト*

Y 軸に表示されるフォームデータモデルのコレクションアイテムの名前を指定します。印刷チャネルの場合、Y 軸のデータモデルオブジェクトのデータタイプは Number にする必要があります。

Y 軸/関数

Y 軸に表示される値を計算するための統計関数またはカスタム関数を指定します。関数の詳細については、「グラフでの関数の使用」と「例 2:線グラフ内で Sum 関数と Frequency 関数を適用する」を参照してください。

凡例を表示

このプロパティを有効にすると、円グラフまたはドーナツグラフの凡例が表示されます。

凡例の位置

グラフを基準にした凡例の位置を指定します。使用できるオプションは、右端、左端、上、下です。

高さ(印刷チャネルの場合のみ)

グラフの高さをピクセル単位で指定します。

幅(印刷チャネルの場合のみ)

グラフの幅をピクセル単位で指定します。 

注意:

Web チャネルのグラフの幅については、スタイルレイヤーを使用するかテーマを適用して調整することができます。

ツールヒント(Web チャネルの場合のみ)

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

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

CSS クラス(Web チャネルの場合のみ)

CSS クラスの名前を「CSS クラス」フィールドに指定し、カスタムのスタイル設定をグラフに適用します。 

直前に改ページ(印刷チャネルの場合のみ)

新しいページの先頭にグラフが表示されるようにグラフの前に改ページを追加する場合は、このプロパティを選択します。 

直後に改ページ(印刷チャネルの場合のみ)

新しいページの先頭にグラフのコンテンツが表示されるようにグラフの後ろに改ページを追加する場合は、このプロパティを選択します。 

インデント(印刷チャネルの場合のみ)

グラフページの左側からのインデントを指定します。 

グラフ固有の設定

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

  • 内半径:ドーナツグラフで使用できます。グラフ内の内側の円の半径をピクセルで指定できます。
  • 線の色:線グラフ、線とポイントグラフ、領域グラフで使用できます。グラフ内の線の色を 16 進値で指定できます。
  • ポイントの色:ポイントグラフと線とポイントグラフで使用できます。グラフ内のポイントの色を 16 進値で指定できます。
  • 領域の色:領域グラフで使用できます。グラフ内の線の下にある領域の色を 16 進値で指定できます。

グラフでの関数の使用

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

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

FunctionChart

注意:

関数はグラフの X 軸の値を計算する場合にも、Y 軸の値を計算する場合にも使用できます。

デフォルトの関数

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

Mean(Average)

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

Sum

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

Maximum

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

Frequency

一方の軸にある特定の値の X 軸または Y 軸の値の出現数を返します。

Range

一方の軸にある特定の値の X 軸または Y 軸の最大値と最小値の差異を返します。

Median

一方の軸にある特定の値の X 軸または Y 軸の値を上半分と下半分に分ける値を返します。

Minimum

一方の軸にある特定の値の X 軸または Y 軸の最小値を返します。

Mode

一方の軸にある特定の値の X 軸または Y 軸で最も多く出現する値を返します。

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 を指定します。(必須)
    • value プロパティを追加し、カスタムの JavaScript™ 関数の完全修飾名を指定します。(必須)このプロパティの値を、カスタム関数の名前に設定します(「Multiply」など)。
    • jcr:description プロパティを追加し、値としてカスタム関数の名前を指定します。この名前が、「関数」ドロップダウンに表示されます。  例えば、「Multiply」などを値として指定します。
    • qtip プロパティを追加し、値としてカスタム関数の簡単な説明を指定します。「関数」ドロップダウンリスト内の関数名にポインターを置くと、ここで指定した説明がツールヒントとして表示されます。
  3. すべて保存」をクリックして設定を保存します。
これで関数をグラフで使用できるようになります。

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

法律上の注意   |   プライバシーポリシー