現在表示中:

警告:

アダプティブドキュメントは「ゲーテッド」プログラムを使用することにより、実稼働での使用に対応しています。実稼働環境でアダプティブドキュメントを使用する場合は、AEM Forms チーム(DL-forms_documents@adobe.com)にご連絡ください。

charts_hero image_update

表やグラフはデータを視覚的に表現します。大量の情報をわかりやすくビジュアル形式で要約するため、複雑なデータを視覚化し、より効率のよい解釈と分析が可能です。 

AEM Forms アドオンパッケージには、すぐに使用できるグラフコンポーネントが含まれています。アダプティブフォームとアダプティブドキュメントでは、繰り返し可能なパネルやテーブルで 2 次元のデータを視覚的に表示することができます。グラフコンポーネントを使用すると、次のタイプのグラフの追加、設定ができます。

  • 円グラフ
  • ドーナツグラフ
  • 棒グラフ
  • 列グラフ
  • 線グラフ
  • 線とポイントグラフ
  • ポイントグラフ
  • 領域グラフ
グラフコンポーネントでは内蔵された統計関数(sum、mean、maximum、minimum、mode、median、range、frequency)を使用して、グラフの値を計算してプロットすることができます。すぐに使用できる関数に加え、独自のカスタム関数を作成して、グラフ内で使用することができます。
 
グラフコンポーネントを追加して設定する方法を見てみましょう。

グラフの追加

グラフコンポーネントはデフォルトで AEM サイドバーから使用できます。グラフコンポーネントはオーサリングモードで AEM サイドバーからアダプティブフォームやアダプティブドキュメントにドラッグアンドドロップできます。コンポーネントをドロップすると、グラフ用のプレースホルダーが作成されます。

グラフの設定

注意:

グラフを設定する前に、グラフの設定の対象となるパネルまたはテーブル行が、繰り返し可能に設定されていることを確認します。コンポーネントを編集ダイアログの「設定を繰り返し」タブでは、繰り返し可能なパネルまたはテーブル行の最小値と最大値を指定できます。

グラフを設定するには、グラフコンポーネントを右クリックし、「編集」をクリックして、グラフを編集ダイアログを開きます。このダイアログに含まれている「タイトルとテキスト」、「設定」、「詳細設定」オプション、および「スタイル設定」タブを使用して、グラフを設定することができます。

基本

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

設定可能なグラフのプロパティ

要素名

JCR コンテンツ構造内のグラフ要素の識別子。グラフ上には表示されませんが、他のコンポーネント、スクリプト、SOM 式の要素を参照する際に役立ちます。

グラフのタイプ

生成するグラフのタイプを指定します。使用可能なオプションには、円グラフ、ドーナツグラフ、棒グラフ、列グラフ、線グラフ、線とポイントグラフ、ポイントグラフ、領域グラフがあります。この例では、グラフのタイプは「」になっています。

データソースの行名の繰り返し

データが存在するテーブル行または繰り返し可能なパネルの要素名を指定します。例では、statementDetails が Statement Details テーブルの繰り返し可能な行の要素名になっています。

X 軸/タイトル

X 軸のタイトルを指定します。例では、X 軸のタイトルは Category になっています。

X 軸/フィールド

X 軸にプロットするフィールド(またはテーブル内のセル)の要素名を指定します。例では、X 軸に category を設定しています。例のテーブルの Category 列にあるテーブルセルの要素名は category になります。

X 軸/機能を使用

X 軸の値の計算に使用する統計関数を指定します。例では、「なし」オプションが選択されています。関数について詳しくは、「グラフでの関数の使用」を参照してください。

Y 軸/タイトル

Y 軸のタイトルを指定します。例では、Y 軸のタイトルは Expense になっています。

Y 軸/フィールド

Y 軸にプロットするフィールド(またはテーブル内のセル)の要素名を指定します。例では、Y 軸にamount を設定しています。例のテーブルの Amount 列にあるテーブルセルの要素名は amount になります。

Y 軸/機能を使用

Y 軸の値の計算に使用する統計関数を指定します。例では、各カテゴリの支出を加算し、加算した値を Y 軸にプロットします。このため、「機能を使用」ドロップダウンリストから「Sum」を選択します。関数について詳しくは、「グラフでの関数の使用」を参照してください。

凡例の位置

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

凡例を表示

有効にすると、グラフの凡例を表示します。

ツールヒント

グラフ内のデータポイントにマウスを置くと表示されるツールヒントの形式を指定します。デフォルト値は ${x}(${y}) です。グラフのタイプに応じて、グラフのポイント、棒、スライスにマウスを置くと、変数 ${x} および ${y} が、X 軸上と Y 軸上の対応する値に動的に置き換えられ、ツールヒントに表示されます。以下の例に示すように、Retails Stores の列にマウスを置くと、Retail Stores(5870) というツールヒントが表示されます。

ツールヒントを無効にするには、「ツールヒント」フィールドを空白にします。このオプションは線グラフと領域グラフには適用できません。

グラフ固有の設定

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

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

CSS クラス

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

設定

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

クレジットカード明細での繰り返し可能なテーブルを例にして、このタブで指定する情報について詳しく見てみましょう。以下に示すように、カテゴリごとの総支出を表して関連付けするグラフをクレジットカード明細の詳細セクションに生成する場合を考えます。

これを行うには、X 軸にカテゴリをプロットし、Y 軸にカテゴリごとの総支出をプロットする必要があります。

statement-details

この例で使用されているクレジットカード明細はアダプティブドキュメントです。明細の詳細セクションはテーブルで、オーサリングモードでは以下のように表示されます。

statement-details-authoring

グラフを生成するための要件と条件について考えてみましょう。

  • グラフは Statement Details テーブル内に作成されたカテゴリごとの総支出を表示します。
  • グラフのタイプは列になっていますが、必要に応じて他のグラフのタイプも選択できます。
  • Statement Details テーブル内のテーブル行は繰り返し可能です。この設定は、テーブル行プロパティの「設定を繰り返し」フィールドで行えます。
  • 行の要素名は statementDetails です。これは、「テーブル行」プロパティで設定できます。
  • Category 列にあるテーブルセルの要素名は category です。これはインラインで指定できます。セルを選択し、編集ボタン をタップします。
  • Amount 列のテーブルセルの要素名は amount です。また、Amount 列のテーブルセルは数値ボックスです。

指定した設定を使用すると、例の列グラフは以下のように表示されます。個々の色はカテゴリを表し、カテゴリの個々の線の項目または数量がグラフ内で加算されます。 

chart

凡例とツールヒントは以下のように表示されます。

chart-legent-tooltip

スタイル設定

スタイルモードでは、グラフの幅をフォームまたはドキュメント全体の幅に対する割合(%)で設定できます。グラフの高さはピクセルで設定できます。その他のオプションには、テキスト、背景、境界線、効果、CSS オーバーライドなどがあります。

スタイルモードに切り替えるには、ページのツールバーで /スタイルをタップします。

スタイル設定に使用可能なグラフのプロパティ

グラフでの関数の使用

統計関数を使用するようにグラフを設定し、ソースデータの値を計算して、グラフにプロットできます。グラフコンポーネントには関数がいくつか内蔵されていますが、独自の関数を作成して、グラフの設定に使用できます。

注意:

関数はグラフの 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 軸で最も多く出現する値を返します。

カスタム関数

グラフではデフォルトの関数を使用できるほか、JavaScript でカスタム関数を作成して、グラフコンポーネントの関数のリストに追加することもできます。

関数は入力された配列または値、カテゴリ名を使用して、値を返します。以下に例を挙げます。

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

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

  1. アダプティブフォームまたはアダプティブドキュメントと関連付けられているクライアントライブラリにカスタム関数を追加します。
  2. CRXDe Lite で apps フォルダーに nt:unstructured ノードを作成し、以下のプロパティを指定します。
    • guideComponentTypefd/af/reducer に設定します。(必須)
    • value をカスタム JavaScript 関数の完全修飾名に設定します。(必須)
    • jcr:description を意味のある名前に設定します。これは「機能を使用」ドロップダウンリストに表示されます。例えば、Multiply と表示されます。
    • qtip に関数の短い説明を設定します。これは「機能を使用」ドロップダウンリストで関数名にマウスを置くと、ツールヒントとして表示されます。
  3. すべて保存」をクリックして設定を保存します。
これで関数をグラフで使用できるようになります。
custom-function

自動更新グラフ

次のいずれかの操作を行うと、グラフが自動的に更新されます。

  • データソースパネルまたはテーブル行のインスタンスを追加または削除します。
  • データソースパネルまたはテーブル行の X 軸または Y 軸にプロットした値を変更します。
  • グラフのタイプを変更します。

アダプティブフォームルールでグラフのタイプを使用します。

chartType プロパティはグラフのタイプを指定します。使用可能な値は pie、donut、bar、line、linepoint、point、area です。これはスクリプト対応プロパティです。つまり、アダプティブフォームルールで使用して、グラフの設定を操作することができます。例を使って説明します。

列グラフを設定した場合を考えてみましょう。ただし、ユーザーが別のタイプのグラフをドロップダウンリストから選択し、グラフを再描画できるオプションを提供するとします。これを行うには、ルールで chartType プロパティを以下のように使用します。

  1. AEM サイドバーからアダプティブフォームにドロップダウンリストコンポーネントをドラッグアンドドロップします。

  2. コンポーネントを選択して をタップします。

  3. ドロップダウンリストのタイトルを指定します。例えば、Select chart type と指定します。

  4. サポートするグラフのタイプを「アイテム」セクションに追加して、ドロップダウンリストに表示します。「完了」をクリックします。

    ドロップダウンリストからグラフを選択
  5. ドロップダウンコンポーネントを選択して をタップします。ルールエディターで、以下に示すようにルールを書き込みます。

    グラフルールの設定

    この例では、グラフコンポーネントの要素名は myChart になっています。

    または、コードエディターに以下のルールを書き込むことができます。

    chart-code-rule

    ルールの作成について詳しくは、「ルールエディター」を参照してください。

  6. 完了」をクリックしてルールを保存します。

これでドロップダウンリストからグラフのタイプを選択し、「更新」をクリックしてグラフを再描画できるようになりました。

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

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