圖表或圖表是資料的視覺化表示法。 它會將大量資訊壓縮為容易理解的視覺格式,讓互動式通訊的收件者更能將複雜資料視覺化、解讀及分析。
建立互動式通訊時,您可以新增圖表,以視覺化方式呈現互動式通訊表單資料模型中的二維資料。 「圖表」元件可讓您新增及設定下列型別的圖表:圓形圖、直條圖、環形圖、橫條圖、折線圖、折線圖和點圖、點圖、區域圖以及象限圖。
執行以下步驟,在互動式通訊中新增及設定圖表:
點選 元件 互動式通訊的副手。
拖放 圖表 元件至下列其中一個元件:
在互動式通訊編輯器中點選圖表元件,然後選取 設定( )。
圖表屬性會顯示在左窗格中。
列印管道中折線圖的基本屬性
Web Channel中折線圖的基本屬性
設定 圖表屬性 根據管道型別而定。
(僅限列印管道)在 代理程式設定,指定代理程式是否需要使用此圖表。 如果 代理程式必須使用此圖表 選項未選取,代理程式可以點選中圖表的眼睛圖示 內容 座席UI的索引標籤以顯示或隱藏圖表。
點選 以儲存圖表屬性。
點選 預覽 以檢視與圖表相關聯的外觀和資料。 點選 編輯 以重新設定圖表屬性。
為列印和Web通道建立圖表時,請設定下列屬性:
欄位 | 說明 | 頻道類型 |
名稱 | 圖表元素的識別碼。 在此欄位中指定的圖表名稱在圖表上不可見。 當從其他元件、指令碼和SOM運算式參照元素時,就會使用它。 | 列印和網頁 |
圖表類型 | 您要產生的圖表型別。 可用的選項有「圓餅圖」、「欄」、「環圈圖」、「長條圖」、「直線」、「線和點」、「點」和「區域」。 | 列印和網頁 |
數列>多個數列 | 選取此項可為繪製在X軸和Y軸上的表單資料模型集合專案新增多個系列。 | 列印和網頁 |
系列>資料模型物件 | 要新增多個序列至圖表的表單資料模型集合專案名稱。 為繪製在X軸和Y軸上的屬性選擇父級表單資料模型物件屬性,以形成有意義的系列。 您繫結的資料模型物件必須是Number、String或Date型別。 |
列印和網頁 |
顯示排列 | 選擇將各系列的數值排列成序。 | 列印和網頁 |
X軸>標題 | X軸的標題。 | 列印和網頁 |
X軸>資料模型物件 | 將在X軸繪製的表單資料模型集合專案的名稱。 選擇相同父資料模型物件的兩個集合/陣列型別屬性,這些屬性彼此有意義,以便繪製在圖表的X軸和Y軸上。 您繫結的資料模型物件必須是Number、String或Date型別。 |
列印和網頁 |
Y軸>標題 | Y軸的標題。 | 列印和網頁 |
Y軸>資料模型物件 | 將在Y軸繪製的表單資料模型集合專案。 在「列印」管道中,Y軸的資料模型物件應為「數字」型別。 選擇相同父資料模型物件的兩個集合/陣列型別屬性,這些屬性彼此有意義,以便繪製在圖表的X軸和Y軸上。 |
列印和網頁 |
Y軸>函式 | 用於計算y軸值的統計/自訂函式。 | 列印和網頁 |
隱藏物件 | 選取以在最終輸出中隱藏圖表。 | 列印和網頁 |
標題 | 圖表的標題。 | 列印 |
高度 | 圖表的高度(畫素)。 | 列印 |
寬度 | 圖表的寬度(畫素)。 您可以使用樣式圖層或套用佈景主題,控制Web Channel中的圖表寬度。 | 列印 |
強制之前的分頁符號 | 選取此項可在圖表前新增強制分頁符號,並將圖表放在新頁面的頂端。 | 列印 |
強制之後的分頁符號 | 選取此項可在圖表後新增必要的分頁符號,並將圖表後的內容放在新頁面的頂端。 | 列印 |
縮排 | 圖表從頁面左側的縮排。 | 列印 |
工具提示 | 工具提示在Web Channel圖表資料點滑鼠游標上顯示的格式。 預設值為${x}(${y})。 根據圖表型別,當您將滑鼠指向圖表的點、長條圖或切片時,變數${x}和${y} 會動態地以X軸和Y軸上的對應值取代,並顯示在工具提示中。 若要停用工具提示,請將 工具提示 欄位空白。 此選項不適用於折線圖和面積圖。 例如,請參閱 範例1:列印和網頁中的圖表輸出. |
Web |
圖表專屬設定 | 除了常用組態外,還提供下列圖表專用組態:
|
列印和網頁 |
您可以設定圖表以使用統計函式來計算來源資料的值,以便在圖表上繪圖。 透過在圖表中套用函式,您可以繪圖表單資料模型不直接提供的資料。
雖然圖表元件隨附一些內建函式,但您可以撰寫 自訂函式 並使其可用於Web Channel的圖表設定。
下列函式預設可用於圖表元件:
平均值(平均) 傳回X或Y軸上指定值在其他軸上的平均值。
Sum 傳回X或Y軸上指定值在其他軸上的所有值總和。
最大值 傳回X或Y軸上指定值在另一個軸上的最大值。
頻率 傳回X或Y軸上指定值在其他軸上的值數目。
Range 傳回X軸或Y軸上,指定值在另一個軸上的最大值和最小值之差。
中間值 傳回在X軸或Y軸上將另一個軸上指定值的高值和低值以一半分隔的值。
最小值 傳回X或Y軸上指定值在其他軸上的最小值。
模式 傳回在X或Y軸上出現次數最多的值,代表另一個軸上的指定值。
如需詳細資訊,請參閱 範例2:在折線圖中使用總和和和頻率函式.
除了在圖表中使用預設函式之外,您也可以在JavaScript中撰寫自訂函式,™且在Web channel的Chart元件中,讓函式清單中的函式可供使用。
函式將一或多個值和類別名稱視為輸入並傳回值。 例如:
Multiply(valueArray, category) {
var val = 1;
_.each(valueArray, function(value) {
val = val * value;
});
return val;
}
編寫自訂函式後,請執行以下操作以使其可用於圖表設定:
若要在「函式」下拉式清單中顯示自訂函式,請在CRXDe Lite中建立 nt:unstructured
apps資料夾中具有以下屬性的節點:
新增屬性 guideComponentType
其值為 fd/af/reducer
. (必要)
新增屬性 value
至自訂JavaScript™函式的完整名稱。 (必要),並將其值設為自訂函式的名稱,例如Multiply。
新增屬性 jcr:description
,其值會顯示在自訂函式的名稱中,該函式會顯示在「函式」下拉式清單中。 例如, 乘.
新增屬性 qtip
值做為自訂函式的簡短說明。 將指標暫留在「 」中的函式名稱上時,它會以工具提示的形式出現 函式 下拉式清單。
按一下 全部儲存 以儲存組態。
函式現在可用於圖表中。
在「基本」標籤中,您可以定義圖表型別、包含資料的來源表單資料模型屬性、要在圖表的X軸和Y軸繪製的標籤,以及可選的統計函式,以計算圖表上繪製的值。
讓我們透過使用互動式通訊產生的卡片陳述式,詳細瞭解基本屬性中最低必要資訊。 假設您要產生圖表,以描述對帳單中不同費用的金額。 您想要使用不同型別的圖表來列印互動式通訊及Web輸出。
若要完成此作業,請指定下列屬性:
互動式通訊列印管道中的直條圖
若要完成此作業,請指定下列屬性:
互動式通訊Web channel中的環形圖
透過在圖表中套用函式,您可以繪圖表單資料模型不直接提供的資料。 在此範例中,我們使用信用卡對帳單範例來瞭解如何將總和和和頻率函式套用至圖表。
沒有函式的折線圖,具有兩個「AirBnB的借方」交易
您可以套用sum函式將相同資料屬性的多個執行個體的值相加,並且只顯示一次。 例如,在下圖中,Sum函式套用在Y軸,以加總兩個AirBnB交易(2050和1050)的Debit金額,並且只顯示一個交易(3100)。
當您想要為相同資料屬性的許多執行個體進行排序及顯示總和時,Sum函式可讓圖表變得更實用。
Frequency函式會傳回另一個軸上指定值Y軸的值數目。 在Y軸(「交易金額」)上套用「頻率」函式後,圖表顯示AirBnB交易出現兩次「借方」,其餘交易型別出現一次。
圖表會繪製在特定日期範圍內執行的交易金額。 象限圖表可將圖表區域分成四個標示的區段。 字元會針對X軸和Y軸使用靜態參考點。 使用多重序列功能,根據銀行名稱來分隔資料。
若要完成此作業,請指定下列屬性:
名稱: 指定圖表的名稱。
圖表型別: 選取 象限 下拉式清單中的。
選取 多個系列 核取方塊。
資料模型物件:指定系列的資料模型物件屬性。 銀行名稱的資料模型物件屬性是以X軸和Y軸繪製的資料模型物件屬性的父項。
資料模型物件: 選取資料模型物件屬性,以建立X軸(交易日期)和Y軸(交易金額)的資料繫結。
在 參考點 區段,選取 靜態 做為繫結型別。
指定X軸和Y軸參照點的值。
指定左上、右上、右下和左下象限的象限標籤。
選取 顯示圖例 核取方塊,顯示銀行名稱的顏色代碼。