最適化表單圖表 af-charts

圖表或圖表是資料的視覺化表示法。 它可讓您將大量資訊壓縮成容易理解的視覺格式，讓您更妥善地視覺化、解譯和分析複雜的資料。
AEM Forms附加元件套件提供立即可用的Chart元件。 您可在最適化表單和檔案中使用，在​ 可重複面板 ​和​ 表格 ​中以視覺化方式呈現二維資料。 「圖表」元件可讓您新增及設定下列型別的圖表：

「圖表」元件支援並提供內建的統計函式（總和、平均值、最大值、最小值、模式、中位數、範圍和頻率），以計算圖表和繪製圖表上的值。 除了現成可用的函式之外，您還可以編寫自己的自訂函式，並讓這些函式可用於圖表中。

現在來看看如何新增及設定圖表元件：

新增圖表 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屬性指定圖表的型別。 可能的值包括圓餅圖、環圈圖、長條圖、直線、線點、點和區域。 這是可編寫指令的屬性，表示您可以在最適化表單規則中使用它來操作圖表設定。 讓我們透過範例來瞭解它。

假設您設定了直條圖。 但是，您也想要為使用者提供一個選項，讓他們從下拉式清單中選取不同的圖表型別並重新繪製圖表。 您可以使用規則中的chartType屬性來達到此目的，如下所示：

現在，您可以從下拉式清單中選取圖表型別，然後按一下「重新整理」以重新繪製圖表。