图表或图表是数据的可视表示形式。 它将大量信息浓缩为易于理解的可视格式,使交互式通信的收件人能够更好地可视化、解释和分析复杂数据。
在创建交互式通信时,可以添加图表以直观地表示来自交互式通信表单数据模型的二维数据。 图表组件允许您添加和配置以下类型的图表:饼图、列、圆环图、条形图、折线图、折线图和点、点、面积图和象限图。
执行以下步骤以在交互式通信中添加和配置图表:
从交互式通信的Sidekick中点按组件。
将图表组件拖放到以下组件之一:
点按交互式通信编辑器中的图表组件,然后从组件工具栏中选择配置( )。
图表属性将显示在左窗格中。
打印渠道中线型图表的基本属性
Web渠道中折线图的基本属性
根据渠道类型配置图表属性。
(仅打印渠道)在代理设置中,指定代理是否必须使用此图表。 如果未选择t是代理使用此图表的必选选项,则代理可以点按代理UI的内容选项卡中该图表的眼睛图标来显示或隐藏图表。
点按以保存图表属性。
点按预览以查看与图表关联的外观和数据。 点按编辑以重新配置图表的属性。
在为打印和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轴的数据模型对象应为Number类型。 选择相同父数据模型对象的两个集合/数组类型属性,这些属性彼此之间具有相互有意义的关系,以在图表的X轴和Y轴上绘制。 |
打印和Web |
Y轴>函数 | 用于计算y轴上值的统计/自定义函数。 | 打印和Web |
隐藏对象 | 选择以在最终输出中隐藏图表。 | 打印和Web |
标题 | 图表的标题。 | 打印 |
高度 | 图表的高度(以像素为单位)。 | 打印 |
宽度 | 图表的宽度(以像素为单位)。您可以使用样式层或通过应用主题来控制Web渠道中图表的宽度。 | 打印 |
之前的必需分页 | 选择以在图表之前添加强制的分页符,并将图表置于新页面的顶部。 | 打印 |
之后的强制分页 | 选择以在图表之后添加强制的分页符,并将内容放在图表之后的新页面顶部。 | 打印 |
缩进 | 图表从页面左侧缩进。 | 打印 |
工具提示 | 工具提示在Web渠道图表中数据点上的鼠标悬停时显示的格式。 默认值为${x}(${y})。 根据图表类型,当您将鼠标指向图表中的点、条或切片时,变量${x}和${y}将动态地替换为X轴和Y轴上的相应值,并显示在工具提示中。 要禁用工具提示,请将工具提示字段留空。 此选项不适用于折线图和面积图。 例如,请参见示例1:打印和Web中的图表输出。 |
Web |
特定于图表的配置 | 除了常见配置外,还提供以下特定于图表的配置:
|
打印和Web |
您可以将图表配置为使用统计函数从源数据计算值,以便在图表上绘制。 通过在图表中应用函数,可以绘制表单数据模型不直接提供的数据。
虽然图表组件附带一些内置函数,但您可以编写自定义函数,并将它们用于Web渠道的图表配置中。
图表组件默认提供以下函数:
平均值(平均值) 返回X轴或Y轴上其他轴上给定值的平均值。
Sum返回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的apps文件夹中创建一个nt:unstructured
节点,并使用以下属性:
添加值为fd/af/reducer
的属性guideComponentType
。 (mandatory)
将属性value
添加到自定义JavaScript™函数的完全限定名称。 (必需)并将其值设置为自定义函数的名称,如Multiply。
添加属性jcr:description
,其中包含要显示为“函数”下拉列表中自定义函数名称的值。 例如,Multiply。
添加属性qtip
,其值将简化自定义函数的描述。 将指针悬停在Function下拉列表中的函数名称上时,它会显示为工具提示。
单击Save All以保存配置。
函数现在可在图表中使用。
在“基本”选项卡中,您可以定义图表类型、包含数据的源表单数据模型属性、要在图表的X轴和Y轴上绘制的标签,以及(可选)用于计算图表上绘制的值的统计函数。
让我们借助使用交互式通信生成的卡语句,详细了解基本属性中所需的最低信息。 假设您要生成一个图表来描述报表中不同费用的金额。 要使用不同类型的图表来打印和输出交互式通信。
要完成此操作,请指定以下属性:
交互式通信打印渠道中的列图
要完成此操作,请指定以下属性:
交互式通信Web渠道中的圆环图
通过在图表中应用函数,可以绘制表单数据模型不直接提供的数据。 在本例中,我们使用信用卡对帐单示例来了解如何将总和和频率函数应用于图表。
没有两笔“AirBnB借记”交易功能的折线图
您可以应用sum函数来累加同一数据属性的多个实例的值,并只显示一次。 例如,在下图中,在Y轴上应用求和函数,以累计AirBnB交易(2050和1050)的两个借记金额,并仅显示一个交易(3100)。
当您想要对同一数据属性的多个实例进行汇总和显示总和时,总和函数可以使图表更有用。
Frequency函数返回另一个轴上给定值的Y轴值数。 通过在Y轴(交易金额)上应用“频率”函数,该图表显示AirBnB交易有两次借记,其余交易类型有一次借记。
图表绘制在特定日期范围内执行的事务处理的金额。 象限图表提供了将图表区域划分为四个标记部分的功能。 该字符对X轴和Y轴使用静态参考点。 使用多系列功能根据银行名称来分隔数据。
要完成此操作,请指定以下属性:
名称: 指定图表的名称。
图表类型: 从下 拉列表中选择象限。
选中多系列复选框。
数据模型对象:为系列指定数据模型对象属性。银行名称的数据模型对象属性是在X轴和Y轴中绘制的数据模型对象属性的父项。
数据模型对象: 选择数据模型对象属性,以为X轴(交易日期)和Y轴(交易金额)创建数据绑定。
在引用点部分中,选择静态作为绑定类型。
指定X轴和Y轴参照点的值。
指定左上、右上、右下和左下象限的象限标签。
选中显示图例复选框以显示银行名称的颜色代码。