在互動式通信中使用圖表

圖表或圖表是資料的視覺表示。 它將大量資訊濃縮成易於理解的視覺格式,使互動式通信的接收方能夠更好地對複雜的資料進行可視化、解譯和分析。

建立互動式通訊時,您可以新增圖表,以從互動式通訊的表單資料模型以視覺化方式呈現二維資料。 圖表元件允許您添加和配置以下類型的圖表:圓形圖、列、環形圖、條形圖、線條圖、線條圖和點圖、點圖、區域圖和像限圖。

在交互通信中添加和配置圖表

執行下列步驟以在互動式通訊中新增和設定圖表:

  1. 從「Interactive Communication(互動式通信)」的側面點選「Components」。

  2. 將​Chart​元件拖放到以下元件之一:

    • 打印通道:目標區域或影像欄位
    • Web頻道:面板或目標區域
  3. 點選「互動式通訊」編輯器中的圖表元件,然後從「元件」工具列選取「設定」(configure_icon)。

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

    打印通道中線型圖的基本屬性

    打印通道中線型圖的基本屬性

    Web通道中線型圖的基本屬性

    Web通道中線型圖的基本屬性

  4. 根據通道類型配置圖表屬性

  5. (僅打印通道)在​代理設定​中,指定代理是否必須使用此圖表。 如果未選擇「代理使用此圖表」選項,則代理可以點選「代理UI」的「內容」頁簽中圖表的眼睛表徵圖,以顯示或隱藏圖表。

    chart_agentproperties

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

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

配置圖表屬性

在為打印通道和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
圖表專屬設定

除了常見設定外,還提供下列圖表專屬設定:

  • 顯示圖例: 顯示圓形圖或環圈圖的圖例。
  • 圖例位置: 指定圖例相對於圖表的位置。可用選項有「右」、「左」、「上」和「下」。 建議在列印管道中使用右側圖例。
  • 內半徑:供環圈圖指定圖表中內圓的半徑(以像素為單位)。
  • 線條顏色:折線圖、折線圖、折線圖、點圖和面積圖可指定圖表中折線的顏色。
  • 點顏色:可用於點、折線圖和點圖,以指定圖表中點的顏色。
  • 區域顏色:區域圖可用於指定圖表中折線下方區域的顏色。
  • 參考點>綁定類型: 可用於像限 圖以指定參考點的綁定類型。使用靜態文本或資料模型對象屬性來定義參考點的值。
  • 參照點> X軸: 如果從「綁定類型」(Binding Type)下 拉清單中選擇「狀態」(Static),以指定參照點的X軸值,則可用於像限圖。
  • 參照點> Y軸: 如果從「綁定類型」(Binding Type)下 拉清單中選擇「靜態」(Static),以指定參照點的Y軸值,則可用於像限圖。
  • 系列的參考點>資料模型對象: 如果從「綁定類型」下拉清單中 選擇「 資料模型對象」,則可用於多個序列像限圖。定義表單資料模型物件屬性以確認參考點的系列.
  • 系列的參考點>資料模型對象值: 如果從「綁定類型」下拉清單中 選擇「 資料模型對象」,則可用於多個序列像限圖。使用系列的表單資料模型對象屬性和此欄位中定義的值,以標識參考點的系列。
  • 參照點>參照點的資料模型對象: 如果從「綁定類型」下拉清 單中 選擇「資料模型對象」,則可用於像限圖。定義表單資料模型對象屬性,該屬性與在X軸和Y軸上繪製的屬性同級。 此外,對於多個系列,定義一個資料模型對象屬性,該屬性是為該系列定義的資料模型對象屬性的子實體。
  • 參考點>資料模型對象值參考點: 如果從「綁定類型」下拉清 單中 選擇「資料模型對象」,則可用於像限圖。對參考點使用表單資料模型對象屬性以及此欄位中定義的值,以標識圖表的參考點。
    像限標籤>左上: 可用於像限圖以指定左上像限的名稱。
  • 像限標籤>右上: 可用於像限圖以指定右上像限的名稱。
  • 像限標籤>右下: 可用於像限圖以指定右下像限的名稱。
  • 像限標籤>左下: 可用於像限圖以指定左下像限的名稱。
打印和Web

在圖表中使用函式

您可以設定圖表,使用統計函式從來源資料計算值,以便在圖表上繪製。 在圖表中套用函式,即可繪製非表單資料模型直接提供的資料。

圖表中的函式

雖然圖表元件帶有一些內置函式,但您可以編寫自定義函式,並將它們用於Web通道的圖表配置中。

圖表元件預設提供下列函式:

平均值(平均值) 傳回X或Y軸上其他軸上指定值的平均值。

​Sum返回X或Y軸上另一個軸上給定值的所有值的總和。

​Maximum(最大值)返回X或Y軸上另一個軸上給定值的最大值。

​頻率返回X或Y軸上另一個軸上給定值的值數。

​範圍返回X軸或Y軸上另一個軸上給定值的最大值和最小值之間的差值。

​中位數傳回在X或Y軸上,將較高和較低值分成兩半的值,以分割另一個軸上的指定值。

​最小值返回X或Y軸上另一個軸上給定值的最小值。

​模式返回值,其中X或Y軸上最多出現另一個軸上給定值的值。

如需詳細資訊,請參閱範例2:求和和和頻率函式線上圖中的應用

Web通道中的自訂函式

除了在圖表中使用預設函式外,您還可以在JavaScript™中編寫自定義函式,並在Web通道的圖表元件的函式清單中使用這些函式。

函式以陣列或值和類別名稱作為輸入,並返回值。 例如:

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

撰寫自訂函式後,請執行下列操作,使其可用於圖表配置:

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

  2. 若要在「函式」下拉式清單中顯示自訂函式,請在CRXDe Lite中,使用下列屬性在應用程式資料夾中建立nt:unstructured節點:

    • 新增屬性guideComponentType,其值為fd/af/reducer。 (強制)

    • 將屬性value新增至自訂JavaScript™函式的完全限定名稱。 (必要),並將其值設為自訂函式的名稱,例如「乘」。

    • 新增屬性jcr:description ,其值要顯示為「函式」下拉式清單中顯示之自訂函式的名稱。 例如, Pully

    • 新增屬性qtip,其值將是自訂函式的簡短說明。 在​Function​下拉式清單中,將指標移至函式名稱時,工具提示會顯示。

  3. 按一下「全部保存」以保存配置。

函式現在可在圖表中使用。

範例1:打印和Web中的圖表輸出

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

讓我們透過使用互動式通訊產生的卡片陳述式,詳細了解基本屬性中所需的最低資訊。 請考慮您要生成一個圖表來描述報表中不同費用的金額。 要使用不同類型的圖表來打印和Interactive Communication的Web輸出。

打印的清單

要完成此操作,請指定以下屬性:

  • 名稱 — 指定圖表的名稱。
  • 圖表類型 — 從下 ​拉清單中選擇列。
  • 標題 — 指定X軸的費用類型和Y軸的事務處理金額。
  • 資料模型對象 — 選擇資料模型對象屬性以建立X軸(費用類型)和Y軸(事務處理金額)的資料綁定。

互動式通信的打印通道中的清單

互動式通信的打印通道中的清單

Web環圈圖

要完成此操作,請指定以下屬性:

  • 名稱 — 指定圖表的名稱。
  • 圖表類型 — 從下 ​拉式清單中選取「核取」。
  • 資料模型對象 — 選擇資料模型對象屬性以建立X軸(費用類型)和Y軸(事務處理金額)的資料綁定。
  • 內半徑 — 將「內半徑」值指定為150,以指定圖表中內圓的半徑(以像素為單位)。
  • 工具提示 — 使用${x}(${y})預設格式來顯示工具提示。工具提示顯示為:費用類型(事務處理金額)。 範例:比特幣借記(10000)。

互動式通訊網路通道中的環圈圖

互動式通訊網路通道中的環圈圖

範例2:和頻函式線上圖中的應用

在圖表中套用函式,即可繪製非表單資料模型直接提供的資料。 在此示例中,我們使用信用卡對帳單示例來了解如何將總和和頻率函式應用於圖表。

線性圖,不含兩筆「AirBnB借記」交易

線性圖,不含兩筆「AirBnB借記」交易

總和函式

您可以套用求和函式來加總相同資料屬性的多個例項的值,且只顯示一次。 例如,在下圖中,Sum函式應用於Y軸,以加總AirBnB交易(2050和1050)的兩個借記金額,並僅顯示一個交易(3100)。

當您想要對相同資料屬性的許多例項進行整理和顯示總和時,總和函式可讓圖表更實用。

折線圖總和

頻率函式

頻率函式返回另一個軸上給定值的Y軸數。 在Y軸(事務量)上應用頻率函式後,圖形顯示AirBnB事務有兩次借記,其餘事務有一次借記。

折線圖頻率

範例3:Web中的多序列像限圖

圖表繪製在特定日期範圍內執行的事務處理的金額。 像限圖表可將圖表區域劃分為四個標籤部分。 該字元對X軸和Y軸使用靜態參照點。 使用多系列功能,根據銀行名稱來隔離資料。

要完成此操作,請指定以下屬性:

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

  • 圖表類型: 從下 ​拉式清單中選取「像限」。

  • 選中​多系列​複選框。

  • 資料模型物件:指定系列的資料模型對象屬性。銀行名稱的資料模型對象屬性是在X軸和Y軸中繪製的資料模型對象屬性的父屬性。

  • 資料模型對象: 選擇資料模型對象屬性,以建立X軸(事務日期)和Y軸(事務金額)的資料綁定。

  • 在​參考點​部分中,選擇​靜態​作為綁定類型。

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

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

  • 選中​顯示圖例​複選框以顯示銀行名稱的顏色代碼。

像限圖

本頁內容