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