在交互通信中使用图表

图表或图表是数据的可视表示。 它将大量信息浓缩为易于理解的可视格式,使交互通信的收件人能够更好地可视化、解释和分析复杂数据。

在创建交互式通信时,您可以添加图表以可视方式表示交互式通信的表单数据模型中的二维数据。 图表组件允许您添加和配置以下类型的图表:饼图、列、甜圈、条、线、线和点、点、面积和象限。

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

执行以下步骤以在交互式通信中添加和配置图表:

  1. 从交互式通信的Sidekick点按​组件

  2. 将​Chart​组件拖放到以下组件之一:

    • 打印渠道:目标区域或图像字段
    • Web渠道:面板或目标区
  3. 点按交互式通信编辑器中的图表组件,并从组件工具栏中选择​配置( configure_icon)。

    图表属性显示在左窗格中。

    打印渠道中线型图表的基本属性

    打印渠道中线型图表的基本属性

    Web渠道中线型图的基本属性

    Web渠道中线型图的基本属性

  4. 根据渠道类型配置图表属性

  5. (仅打印渠道)在​代理设置​中,指定代理是否必须使用此图表。 如果未选择此图表​选项,则代理可点击代理UI的​内容​选项卡中图表的眼睛图标以显示或隐藏图表。

    chart_agent属性

  6. 点按done_icon以保存图表属性。

    点按​预览​以视图与图表关联的外观和数据。 点按​编辑​以重新配置图表的属性。

配置图表属性

在为打印和Web渠道创建图表时配置以下属性:

字段 描述 渠道类型
名称 图表元素的标识符。 在此字段中指定的图表的名称在图表上不可见。 它用于引用来自其他组件、脚本和SOM表达式的元素。 印刷和Web
图表类型 要生成的图表类型。 可用的选项有饼图、列、圆环、条、线、线和点、点和区域。 印刷和Web
“系列”>“多系列” 选择此项可为X轴和Y轴上绘制的表单数据模型集合项添加多个系列。 印刷和Web
“序列”>“数据模型对象” 用于向图表添加多个系列的表单数据模型集合项的名称。
为在X轴和Y轴上绘制的属性选择父表单数据模型对象属性,以形成有意义的系列。绑定的数据模型对象必须是“数字”、“字符串”或“日期”类型。
印刷和Web
显示排列 选择将各系列的数值排列程序。 印刷和Web
X轴>标题 X轴的标题。 印刷和Web
X轴>数据模型对象

要绘制在X轴上的表单数据模型集合项的名称。

选择同一父数据模型对象的两个集合/数组类型属性,这些属性彼此有意义,可绘制图表的X和Y轴。 绑定的数据模型对象必须是“数字”、“字符串”或“日期”类型。

印刷和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
图表特定配置

除了常见配置之外,还提供以下图表特定配置:

  • 显示图例: 在启用时显示饼图或甜圈图的图例。
  • 图例位置: 指定图例相对于图表的位置。可用选项有“右”、“左”、“上”和“下”。 建议在打印渠道中使用右侧图例。
  • 内半径:可用于圆环图指定图表中内圆的半径(以像素为单位)。
  • 线条颜色:可用于折线图、折线图、点图和面积图以指定图表中折线的颜色。
  • 点颜色:点图和线图和点图可用于指定图表中点的颜色。
  • 区域颜色:面积图可用于指定图表中线下区域的颜色。
  • “参考点”>“绑定类型”: 可用于象限图 表指定参考点的绑定类型。使用静态文本或数据模型对象属性定义参考点的值。
  • “参照点”(Reference Point)>“X轴”(X-axis): 如果从“绑定类型”(Binding Type)下 拉列表中选择“状态”(Static)来指定参考点的X轴值,则此图表可用。
  • 参照点> Y轴: 如果从“绑定类型”(Binding Type)下 拉列表中选择“状态”(Static)来指定参考点的Y轴值,则此图表可用。
  • “参考点”>“序列的数据模型对象”: 如果从“绑定类型”下拉列表中 选择“ 数据模型对象”,则可用于多个系列象限图表。定义表单数据模型对象属性以确定参考点的系列.
  • “参考点”>“序列的数据模型对象值”: 如果从“绑定类型”下拉列表中 选择“ 数据模型对象”,则可用于多个系列象限图表。使用序列的表单数据模型对象属性和此字段中定义的值来标识参考点的序列。
  • “参照点”(Reference Point)>“参照点的数据模型对象”(Data Model Object for Reference Point): 如果从“绑定类型”下拉列表 中选 择“数据模型对象”,则可用于象限图表。定义表单数据模型对象属性,该属性是绘制在X轴和Y轴上的属性的同级。 此外,对于多个系列,定义一个数据模型对象属性,该属性是为该系列定义的数据模型对象属性的子实体。
  • “参照点”(Reference Point)>“参照点的数据模型对象值”(Data Model Object Value for Reference Point): 如果从“绑定类型”下拉列表 中选 择“数据模型对象”,则可用于象限图表。将表单数据模型对象属性用于引用点以及此字段中定义的值,以标识图表的引用点。
    象限标签>左上图:可 用于象限图表,以指定左上图的名称。
  • 象限标签>右上:可 用于象限图表,以指定右上象限的名称。
  • 象限标签>右下: 可用于象限图表以指定右下象限的名称。
  • 象限标签>左下: 可用于象限图表以指定左下象限的名称。
印刷和Web

在图表中使用函数

您可以将图表配置为使用统计函数从源数据计算值以在图表上绘制。 通过在图表中应用函数,可以绘制表单数据模型不直接提供的数据。

图表中的函数

当图表组件包含一些内置函数时,您可以编写自定义函数并使它们可用于Web渠道的图表配置。

图表组件默认提供以下功能:

平均值(平 均值)返回X轴或Y轴上另一个轴上给定值的平均值。

Sum 返回X或Y轴上另一个轴上给定值的所有值的和。

大值返回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中,使用以下属性在apps文件夹中创建一个nt:unstructured节点:

    • 添加值为fd/af/reducer的属性guideComponentType。 (mandatory)

    • 将属性value添加到自定义JavaScript™函数的完全限定名称。 (必填),将其值设置为自定义函数的名称,如Multiply。

    • 添加属性jcr:description,其值要显示为“函数”下拉列表中显示的自定义函数的名称。 例如,Multiply

    • 添加属性qtip,其值将是自定义函数的简短描述。 将指针悬停在​Function​下拉列表中的函数名称上时,它将显示为工具提示。

  3. 单击​保存全部​以保存配置。

该函数现在可在图表中使用。

示例1:打印和Web中的图表输出

在“基本”选项卡中,您定义图表类型、包含数据的源表单数据模型属性、要在图表的X轴和Y轴上绘制的标签,以及(可选)用于计算在图表上绘制的值的统计函数。

让我们借助使用交互式通信生成的卡语句,详细了解基本属性中最低要求的信息。 请考虑您要生成一个图表来描述报表中不同费用的金额。 您希望使用不同类型的图表来打印和Web输出交互通信。

用于打印的柱状图

要完成此操作,请指定以下属性:

  • 名称 -指定图表的名称。
  • 图表类型 -从 ​下拉列表中选择列。
  • 标题 -为X轴指定费用类型,为Y轴指定事务处理金额。
  • 数据模型对象 -选择数据模型对象属性,为X轴(费用类型)和Y轴(事务处理金额)创建数据绑定。

交互通信打印渠道中的柱状图

交互通信打印渠道中的柱状图

Web的圆环图

要完成此操作,请指定以下属性:

  • 名称 -指定图表的名称。
  • 图表类型 -从 ​下拉列表中选择“下载”。
  • 数据模型对象 -选择数据模型对象属性,为X轴(费用类型)和Y轴(事务处理金额)创建数据绑定。
  • 内半径 -将“内半径”值指定为150,以指定图表中内圆的半径(以像素为单位)。
  • 工具 提示——使用${x}(${y})默认格式显示工具提示。工具提示显示为:费用类型(事务处理金额)。 示例:比特币的借方(10000)。

交互式通信的Web渠道中的圆环图

交互式通信的Web渠道中的圆环图

示例2:求和与频率函数在线图中的应用

通过在图表中应用函数,可以绘制表单数据模型不直接提供的数据。 在此示例中,我们使用信用卡对帐单示例来了解如何将“和”和“频率”函数应用于图表。

无函数的折线图,含两个“AirBnB借项”交易

无函数的折线图,含两个“AirBnB借项”交易

和函数

您可以应用sum函数来添加同一数据属性的多个实例的值,并且只显示一次。 例如,在下图中,在Y轴上应用Sum函数,将AirBnB交易(2050和1050)的两个借项的金额相加,并且只显示一个交易(3100)。

当您要对同一数据属性的多个实例进行拼合和显示和时,Sum函数可以使图形更有用。

折线图和

频率函数

Frequency函数为另一个轴上的给定值返回Y轴的值数。 在Y轴(事务处理金额)上应用“频率”函数时,该图表显示AirBnB事务处理发生了两次借项,其余类型的事务处理发生了一次。

折线图频率

示例3:Web中的多序列象限图

图表以曲线表示在特定日期范围内执行的事务处理的金额。 象限图表提供了将图表区域分为四个标记部分的功能。 该字符对X轴和Y轴使用静态参照点。 使用多系列功能根据银行名称隔离数据。

要完成此操作,请指定以下属性:

  • 名称: 指定图表的名称。

  • 图表类 型: ​从下拉列表中选择象限。

  • 选中​多系列​复选框。

  • 数据模型对象:指定系列的数据模型对象属性。银行名称的数据模型对象属性是在X轴和Y轴中绘制的数据模型对象属性的父项。

  • 数据模型对 象:选择数据模型对象属性,为X轴(事务日期)和Y轴(事务金额)创建数据绑定。

  • 在​参考点​部分,选择​静态​作为绑定类型。

  • 指定X轴和Y轴参照点的值。

  • 指定“左上”、“右上”、“右下”和“左下”象限的象限标签。

  • 选中​显示图例​复选框以显示库名称的颜色代码。

象限图

在此页面上