在互動式通訊中使用圖表

圖表或圖表是資料的視覺化表示法。 它會將大量資訊壓縮為容易理解的視覺格式，讓互動式通訊的收件者更能將複雜資料視覺化、解讀及分析。

建立互動式通訊時，您可以新增圖表，以視覺化方式呈現互動式通訊表單資料模型中的二維資料。 「圖表」元件可讓您新增及設定下列型別的圖表：圓形圖、直條圖、環形圖、橫條圖、折線圖、折線圖和點圖、點圖、區域圖以及象限圖。

在互動式通訊中新增及設定圖表

執行以下步驟，在互動式通訊中新增及設定圖表：

1. 點選 元件 互動式通訊的副手。

2. 拖放 圖表 元件至下列其中一個元件：

   • 列印管道：目標區域或影像欄位
   • Web channel：面板或目標區域

3. 在互動式通訊編輯器中點選圖表元件，然後選取 設定( )。

   圖表屬性會顯示在左窗格中。

   

   列印管道中折線圖的基本屬性

   

   Web Channel中折線圖的基本屬性

4. 設定 圖表屬性 根據管道型別而定。

5. （僅限列印管道）在 代理程式設定，指定代理程式是否需要使用此圖表。 如果 代理程式必須使用此圖表 選項未選取，代理程式可以點選中圖表的眼睛圖示 內容 座席UI的索引標籤以顯示或隱藏圖表。

   

6. 點選 以儲存圖表屬性。

   點選 預覽 以檢視與圖表相關聯的外觀和資料。 點選 編輯 以重新設定圖表屬性。

設定圖表屬性

為列印和Web通道建立圖表時，請設定下列屬性：

在圖表中使用函式

您可以設定圖表以使用統計函式來計算來源資料的值，以便在圖表上繪圖。 透過在圖表中套用函式，您可以繪圖表單資料模型不直接提供的資料。

雖然圖表元件隨附一些內建函式，但您可以撰寫 自訂函式 並使其可用於Web Channel的圖表設定。

下列函式預設可用於圖表元件：

平均值（平均） 傳回X或Y軸上指定值在其他軸上的平均值。

Sum 傳回X或Y軸上指定值在其他軸上的所有值總和。

最大值 傳回X或Y軸上指定值在另一個軸上的最大值。

頻率 傳回X或Y軸上指定值在其他軸上的值數目。

Range 傳回X軸或Y軸上，指定值在另一個軸上的最大值和最小值之差。

中間值 傳回在X軸或Y軸上將另一個軸上指定值的高值和低值以一半分隔的值。

最小值 傳回X或Y軸上指定值在其他軸上的最小值。

模式 傳回在X或Y軸上出現次數最多的值，代表另一個軸上的指定值。

如需詳細資訊，請參閱 範例2：在折線圖中使用總和和和頻率函式.

Web Channel中的自訂函式

除了在圖表中使用預設函式之外，您也可以在JavaScript中撰寫自訂函式，™且在Web channel的Chart元件中，讓函式清單中的函式可供使用。

函式將一或多個值和類別名稱視為輸入並傳回值。 例如：

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

編寫自訂函式後，請執行以下操作以使其可用於圖表設定：

1. 在與相關互動式通訊相關聯的使用者端資料庫中新增自訂函式。 如需詳細資訊，請參閱 設定提交動作 和 使用使用者端資料庫.

2. 若要在「函式」下拉式清單中顯示自訂函式，請在CRXDe Lite中建立 nt:unstructured apps資料夾中具有以下屬性的節點：

   • 新增屬性 guideComponentType 其值為 fd/af/reducer. （必要）

   • 新增屬性 value 至自訂JavaScript™函式的完整名稱。 （必要），並將其值設為自訂函式的名稱，例如Multiply。

   • 新增屬性 jcr:description ，其值會顯示在自訂函式的名稱中，該函式會顯示在「函式」下拉式清單中。 例如， 乘.

   • 新增屬性 qtip 值做為自訂函式的簡短說明。 將指標暫留在「 」中的函式名稱上時，它會以工具提示的形式出現 函式 下拉式清單。

3. 按一下 全部儲存 以儲存組態。

函式現在可用於圖表中。

範例1：列印和網頁中的圖表輸出

在「基本」標籤中，您可以定義圖表型別、包含資料的來源表單資料模型屬性、要在圖表的X軸和Y軸繪製的標籤，以及可選的統計函式，以計算圖表上繪製的值。

讓我們透過使用互動式通訊產生的卡片陳述式，詳細瞭解基本屬性中最低必要資訊。 假設您要產生圖表，以描述對帳單中不同費用的金額。 您想要使用不同型別的圖表來列印互動式通訊及Web輸出。

列印用的柱狀圖

若要完成此作業，請指定下列屬性：

• 名稱 — 指定圖表的名稱。
• 圖表型別 — 選取 欄 下拉式清單中的。
• 標題 — 指定X軸的費用型態和Y軸的交易金額。
• 資料模型物件 — 選取資料模型物件屬性，以建立X軸（費用型別）和Y軸（交易金額）的資料繫結。

互動式通訊列印管道中的直條圖

適用於Web的環形圖

若要完成此作業，請指定下列屬性：

• 名稱 — 指定圖表的名稱。
• 圖表型別 — 選取 環形圖 下拉式清單中的。
• 資料模型物件 — 選取資料模型物件屬性，以建立X軸（費用型別）和Y軸（交易金額）的資料繫結。
• 內徑 — 將「內半徑」值指定為150，以指定圖表內圓的半徑（畫素）。
• 工具提示 — 使用${x}(${y})預設格式以顯示工具提示。 工具提示顯示為：費用型別（交易金額）。 範例：Bitcoin(10000)的Debit。

互動式通訊Web channel中的環形圖

範例2：在折線圖中使用總和和和頻率函式

透過在圖表中套用函式，您可以繪圖表單資料模型不直接提供的資料。 在此範例中，我們使用信用卡對帳單範例來瞭解如何將總和和和頻率函式套用至圖表。

沒有函式的折線圖，具有兩個「AirBnB的借方」交易

Sum函式

您可以套用sum函式將相同資料屬性的多個執行個體的值相加，並且只顯示一次。 例如，在下圖中，Sum函式套用在Y軸，以加總兩個AirBnB交易（2050和1050）的Debit金額，並且只顯示一個交易(3100)。

當您想要為相同資料屬性的許多執行個體進行排序及顯示總和時，Sum函式可讓圖表變得更實用。

頻率函式

Frequency函式會傳回另一個軸上指定值Y軸的值數目。 在Y軸（「交易金額」）上套用「頻率」函式後，圖表顯示AirBnB交易出現兩次「借方」，其餘交易型別出現一次。

範例3：Web中的多系列象限圖

圖表會繪製在特定日期範圍內執行的交易金額。 象限圖表可將圖表區域分成四個標示的區段。 字元會針對X軸和Y軸使用靜態參考點。 使用多重序列功能，根據銀行名稱來分隔資料。

若要完成此作業，請指定下列屬性：

• 名稱： 指定圖表的名稱。

• 圖表型別： 選取 象限 下拉式清單中的。

• 選取 多個系列 核取方塊。

• 資料模型物件：指定系列的資料模型物件屬性。 銀行名稱的資料模型物件屬性是以X軸和Y軸繪製的資料模型物件屬性的父項。

• 資料模型物件： 選取資料模型物件屬性，以建立X軸（交易日期）和Y軸（交易金額）的資料繫結。

• 在 參考點 區段，選取 靜態 做為繫結型別。

• 指定X軸和Y軸參照點的值。

• 指定左上、右上、右下和左下象限的象限標籤。

• 選取 顯示圖例 核取方塊，顯示銀行名稱的顏色代碼。

Business.Adobe.com 資源

Auto Text Summarization Mobile Forms Responsive Forms Document Generation Dynamic Forms Digital Asset Management