アダプティブフォームのグラフ af-charts

表やグラフはデータを視覚的に示す表示域です。大量の情報をわかりやすい視覚的形式で要約し、複雑なデータの視覚化、解釈および分析を改善できます。
AEM Formsアドオンパッケージには、すぐに使用できるグラフコンポーネントが用意されています。アダプティブフォームとドキュメントで、繰り返し可能なパネル ​や​ テーブル ​で 2 次元データを視覚的に表現するのに使用できます。グラフコンポーネントを使用すると、次のタイプのグラフを追加および設定できます。

グラフコンポーネントでは、グラフの値を計算およびプロットする組み込みの統計関数（sum、mean、maximum、minimum、mode、median、range、frequency）をサポートし提供します。すぐに使用できる関数に加え、独自のカスタム関数を作成して、グラフで使用できるようにすることができます。

次に、グラフコンポーネントを追加して設定する方法を見てみましょう。

グラフの追加 add-chart

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

グラフの設定 configure-chart

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

基本 basic

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

設定 configuration

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

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

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

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

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

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

スタイル設定 styling

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

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

グラフで関数を使用 use-functions

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

デフォルトの関数 default-functions

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

カスタム関数 custom-functions

グラフでデフォルトの関数を使用するだけでなく、JavaScript でカスタム関数を作成し、グラフコンポーネントの関数リストに追加できます。

関数は入力された配列または値とカテゴリ名を使用して、値を返します。例：

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

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

グラフの自動更新 auto-refresh-chart

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

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

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

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

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