在Interactive Communications中使用图表

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

在创建交互式通信时，您可以添加图表以可视方式表示来自交互式通信的表单数据模型的二维数据。 图表组件允许您添加和配置以下类型的图表：饼图、列图、圆环图、条形图、线图、线图和点图、点图、面积图和象限图。

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

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

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

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

   • 打印渠道:目标区域或图像字段
   • Web渠道:面板或目标区域

3. 点按交互式通信编辑器中的图表组件，然后从组件工具栏中选择​配置( )。

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

   

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

   

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

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

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

   

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

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

配置图表属性

在为打印和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节点：

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

   • 将属性value添加到自定义JavaScript™函数的完全限定名。 （必填），将其值设置为自定义函数的名称，如“乘号”。

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

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

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

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

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

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

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

打印的柱状图

要完成此操作，请指定以下属性：

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

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

Web的圆环图

要完成此操作，请指定以下属性：

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

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

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

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

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

Sum函数

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

Sum函数可让图表在您希望对相同数据属性的许多实例进行拼贴和显示sum时更有用。

频率函数

Frequency函数返回另一个轴上给定值的Y轴值数。 通过在Y轴（事务处理金额）上应用“频率”功能，该图表显示，AirBnB事务处理发生了两次借项事件，其余事务类型发生了一次。

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

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

要完成此操作，请指定以下属性：

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

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

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

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

• 数据模型对 象：选择数据模型对象属性，为X轴（事务日期）和Y轴（事务金额）创建数据绑定。

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

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

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

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