在互動式通訊中使用圖表 using-charts-in-interactive-communications
圖表或圖表是資料的視覺化表示法。 它會將大量資訊壓縮為容易理解的視覺格式,讓互動式通訊的收件者更能將複雜資料視覺化、解讀及分析。
建立互動式通訊時,您可以新增圖表,以視覺化方式呈現互動式通訊表單資料模型中的二維資料。 「圖表」元件可讓您新增及設定下列型別的圖表:圓形圖、直條圖、環形圖、橫條圖、折線圖、折線圖和點圖、點圖、區域圖以及象限圖。
在互動式通訊中新增及設定圖表 add-and-configure-chart-in-an-interactive-communication
執行以下步驟,在互動式通訊中新增及設定圖表:
-
從互動式通訊的Sidekick中選取 元件。
-
將 圖表 元件拖放至下列其中一個元件:
- 列印管道:目標區域或影像欄位
- Web channel:面板或目標區域
-
在互動式通訊編輯器中選取圖表元件,並從元件工具列選取 設定( )。
圖表屬性會顯示在左窗格中。
列印管道中折線圖的基本屬性
Web Channel中折線圖的基本屬性
-
根據通道型別設定圖表屬性。
-
(僅列印通道)在 代理程式設定 中,指定代理程式是否必須使用此圖表。 如果未選取代理程式使用此圖表 選項,代理程式可以在Agent UI的 內容 標籤中選取圖表的眼睛圖示,以顯示或隱藏圖表。
-
選取 以儲存圖表屬性。
選取 預覽 以檢視與圖表關聯的外觀和資料。 選取 編輯 以重新設定圖表內容。
設定圖表屬性 configure-chart-properties
為列印和Web通道建立圖表時,請設定下列屬性:
在圖表中使用函式 use-functions-in-chart
您可以設定圖表以使用統計函式來計算來源資料的值,以便在圖表上繪圖。 透過在圖表中套用函式,您可以繪圖表單資料模型不直接提供的資料。
圖表中的
雖然圖表元件隨附一些內建函式,但您可以撰寫自訂函式,使其可用於Web Channel的圖表設定。
下列函式預設可用於圖表元件:
平均值(Average) 傳回X或Y軸上指定值在其他軸上的平均值。
Sum 傳回X或Y軸上指定值在其他軸上的總和。
Maximum 傳回X或Y軸上指定值在另一個軸上的最大值。
Frequency 傳回X或Y軸上另一個軸上指定值的值數目。
Range 傳回X或Y軸上指定值在另一個軸上的最大值和最小值之間的差異。
中位數 傳回將另一個軸上指定值在X或Y軸上一半的高值和低值分隔開的值。
最小值 傳回X或Y軸上指定值在其他軸上的最小值。
Mode 傳回另一個座標軸上指定值在X或Y座標軸上出現次數最多的值。
如需詳細資訊,請參閱範例2:在折線圖中套用Sum和Frequency函式。
Web Channel中的自訂函式 customfunctionsweb
除了在圖表中使用預設函式之外,您還可以在JavaScript中編寫自訂函式,並™Web channel的Chart元件中,讓這些函式可在函式清單中使用。
函式將一或多個值和類別名稱視為輸入並傳回值。 例如:
Multiply(valueArray, category) {
var val = 1;
_.each(valueArray, function(value) {
val = val * value;
});
return val;
}
編寫自訂函式後,請執行以下操作以使其可用於圖表設定:
-
若要在「函式」下拉式清單中顯示自訂函式,請在CRXDe Lite的apps資料夾中建立具有以下屬性的
nt:unstructured
節點:-
新增值為
fd/af/reducer
的屬性guideComponentType
。 (必要) -
將屬性
value
新增至自訂JavaScript™函式的完整名稱。 (必要),並將其值設為自訂函式的名稱,例如Multiply。 -
新增屬性
jcr:description
,其值要顯示為「函式」下拉式清單中自訂函式的名稱。 例如,乘。 -
新增屬性
qtip
,其值將是自訂函式的簡短描述。 將指標暫留在 函式 下拉式清單中的函式名稱上時,它會顯示為工具提示。
-
-
按一下「儲存全部 」 以儲存組態。
函式現在可用於圖表中。
範例1:列印和網頁中的圖表輸出 chartoutputprintweb
在「基本」標籤中,您可以定義圖表型別、包含資料的來源表單資料模型屬性、要在圖表的X軸和Y軸繪製的標籤,以及可選的統計函式,以計算圖表上繪製的值。
讓我們透過使用互動式通訊產生的卡片陳述式,詳細瞭解基本屬性中最低必要資訊。 假設您要產生圖表,以描述對帳單中不同費用的金額。 您想要使用不同型別的圖表來列印互動式通訊及Web輸出。
列印用的柱狀圖 columnchartprint
若要完成此作業,請指定下列屬性:
- 名稱 — 指定圖表的名稱。
- 圖表型別 — 從下拉式清單中選取 資料行。
- 標題 — 指定X軸的費用型別和Y軸的交易金額。
- 資料模型物件 — 選取資料模型物件屬性,以建立X軸(費用型別)和Y軸(交易金額)的資料繫結。
互動式通訊列印管道中的直條圖
適用於Web的環形圖 donutchartweb
若要完成此作業,請指定下列屬性:
- 名稱 — 指定圖表的名稱。
- 圖表型別 — 從下拉式清單中選取 環形圖。
- 資料模型物件 — 選取資料模型物件屬性,以建立X軸(費用型別)和Y軸(交易金額)的資料繫結。
- 內徑 — 指定內徑值為150,以指定圖表內圓的半徑(畫素)。
- 工具提示 — 使用${x}(${y})預設格式來顯示工具提示。 工具提示顯示為:費用型別(交易金額)。 範例:Bitcoin(10000)的Debit。
互動式通訊的Web channel中的
互動式通訊Web channel中的環形圖
範例2:在折線圖中使用總和和和頻率函式 applicationsumfrequency
透過在圖表中套用函式,您可以繪圖表單資料模型不直接提供的資料。 在此範例中,我們使用信用卡對帳單範例來瞭解如何將總和和和頻率函式套用至圖表。
沒有函式的折線圖,具有兩個「AirBnB的借方」交易
Sum函式 sum-function
您可以套用sum函式將相同資料屬性的多個執行個體的值相加,並且只顯示一次。 例如,在下圖中,Sum函式套用在Y軸,以加總兩個AirBnB交易(2050和1050)的Debit金額,並且只顯示一個交易(3100)。
當您想要為相同資料屬性的許多執行個體進行排序及顯示總和時,Sum函式可讓圖表變得更實用。
頻率函式 frequency-function
Frequency函式會傳回另一個軸上指定值Y軸的值數目。 在Y軸(「交易金額」)上套用「頻率」函式後,圖表顯示AirBnB交易出現兩次「借方」,其餘交易型別出現一次。
範例3:Web中的多系列象限圖 example-multi-series-quadrant-chart-in-web
圖表會繪製在特定日期範圍內執行的交易金額。 象限圖表可將圖表區域分成四個標示的區段。 字元會針對X軸和Y軸使用靜態參考點。 使用多重序列功能,根據銀行名稱來分隔資料。
若要完成此作業,請指定下列屬性:
-
名稱: 指定圖表的名稱。
-
圖表型別: 從下拉式清單中選取 象限。
-
選取 多個系列 核取方塊。
-
資料模型物件:指定系列的資料模型物件屬性。 銀行名稱的資料模型物件屬性是以X軸和Y軸繪製的資料模型物件屬性的父項。
-
資料模型物件: 選取資料模型物件屬性,以建立X軸(交易日期)和Y軸(交易金額)的資料繫結。
-
在 參考點 區段中,選取 靜態 做為繫結型別。
-
指定X軸和Y軸參照點的值。
-
指定左上、右上、右下和左下象限的象限標籤。
-
選取 顯示圖例 核取方塊,以顯示銀行名稱的顏色代碼。