在交互式通信中使用图表 using-charts-in-interactive-communications
图表或图形是数据的可视化表示形式。 它将大量信息压缩为易于理解的视觉格式,使交互式通信的接收者能够更好地可视化、解释和分析复杂数据。
在创建交互式通信时,可以添加图表以直观地表示来自交互式通信表单数据模型的二维数据。 图表组件允许您添加和配置以下类型的图表:饼图、列、圆环图、条形图、折线图、折线图和点图、点图、面积图以及象限图。
在交互式通信中添加和配置图表 add-and-configure-chart-in-an-interactive-communication
执行以下步骤在交互式通信中添加和配置图表:
-
从交互式通信的Sidekick中选择 组件。
-
将 Chart 组件拖放到以下组件之一:
- 打印渠道:目标区域或图像字段
- Web渠道:面板或目标区域
-
在交互式通信编辑器中选择图表组件,然后从组件工具栏中选择 配置( )。
图表属性显示在左窗格中。
打印渠道中折线图的基本属性
Web渠道中折线图的基本属性
-
根据渠道类型配置图表属性。
-
(仅打印渠道)在 代理设置 中,指定代理是否必须使用此图表。 如果未选中 t强制代理使用此图表 选项,代理可以在Agent UI的 内容 选项卡中选择图表的眼睛图标来显示或隐藏图表。
-
选择 以保存图表属性。
选择 预览 以查看与图表关联的外观和数据。 选择 编辑 以重新配置图表的属性。
配置图表属性 configure-chart-properties
为打印和Web渠道创建图表时,请配置以下属性:
在图表中使用函数 use-functions-in-chart
您可以配置图表以使用统计函数计算源数据的值,以便在图表上绘图。 通过在图表中应用函数,可以绘制表单数据模型未直接提供的数据。
图表中的
虽然图表组件带有一些内置函数,但您可以编写自定义函数,使其可用于Web渠道的图表配置中。
默认情况下,以下函数可用于图表组件:
平均值(Average) 返回另一轴上给定值的X轴或Y轴上的值的平均值。
Sum 返回X轴或Y轴上给定值在其他轴上的总和。
Maximum 返回另一轴上给定值的X轴或Y轴上的值的最大值。
Frequency 返回另一轴上给定值的X轴或Y轴上的值数。
范围 返回另一轴上给定值的X轴或Y轴上的最大值和最小值之间的差值。
中间值 返回将另一轴上给定值在X轴或Y轴上一半的高值和低值分隔开的值。
Minimum 返回另一轴上给定值在X或Y轴上的最小值。
Mode 返回另一个轴上给定值在X或Y轴上出现次数最多的值。
有关详细信息,请参阅示例2:在折线图中应用求和和和频度函数。
Web渠道中的自定义函数 customfunctionsweb
除了在图表中使用默认函数之外,您还可以在JavaScript中编写自定义函数,™且在Web渠道的图表组件中的函数列表中提供这些函数。
函数将一个或多个值和类别名称作为输入并返回一个值。 例如:
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:打印和Web中的图表输出 chartoutputprintweb
在“基本”选项卡中,您可以定义图表类型、包含数据的源表单数据模型属性、要在图表的X轴和Y轴上绘制的标签,还可以选择定义统计函数以计算在图表上绘制的值。
让我们通过使用交互式通信生成的卡语句来详细了解基本属性中最低要求的信息。 假设您要生成一个图表来描述对帐单中不同费用的金额。 要使用不同类型的图表进行交互式通信的打印和Web输出。
用于打印的柱状图 columnchartprint
要完成此操作,请指定以下属性:
- 名称 — 指定图表的名称。
- 图表类型 — 从下拉列表中选择 列。
- 标题 — 指定X轴的费用类型和Y轴的交易金额。
- 数据模型对象 — 选择数据模型对象属性以创建X轴(费用类型)和Y轴(交易金额)的数据绑定。
交互式通信打印渠道中的柱状图
适用于Web的圆环图 donutchartweb
要完成此操作,请指定以下属性:
- 名称 — 指定图表的名称。
- 图表类型 — 从下拉列表中选择 圆环图。
- 数据模型对象 — 选择数据模型对象属性以创建X轴(费用类型)和Y轴(交易金额)的数据绑定。
- 内半径 — 将内半径值指定为150,以指定图表内圆的半径(以像素为单位)。
- 工具提示 — 使用${x}(${y})默认格式显示工具提示。 工具提示显示为:费用类型(交易金额)。 示例:借记的比特币(10000)。
交互式通信的Web渠道中的
交互式通信Web渠道中的圆环图
示例2:在折线图中应用“和”和“频率”函数 applicationsumfrequency
通过在图表中应用函数,可以绘制表单数据模型未直接提供的数据。 在本例中,我们使用信用卡对帐单示例来了解如何将“总和”和“频率”函数应用于图表。
不带函数的折线图,带有两个“AirBnB借记”交易记录
Sum函数 sum-function
您可以应用sum函数将同一数据属性的多个实例的值相加,并且只显示一次。 例如,在下图中,在Y轴上应用Sum函数,将AirBnB事务处理(2050和1050)的两个Debit for AirBnB事务处理(3100)的总和相加,并仅显示一个事务处理(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轴参照点的值。
-
指定左上、右上、右下和左下象限的象限标签。
-
选中 显示图例 复选框以显示银行名称的颜色代码。