在交互式通信中使用图表 using-charts-in-interactive-communications

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

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

在交互式通信中添加和配置图表 add-and-configure-chart-in-an-interactive-communication

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

  1. 从交互式通信的Sidekick中选择​ 组件

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

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

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

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

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

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

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

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

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

    chart_agentproperties

  6. 选择 done_icon 以保存图表属性。

    选择​ 预览 ​以查看与图表关联的外观和数据。 选择​ 编辑 ​以重新配置图表的属性。

配置图表属性 configure-chart-properties

为打印和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轴: 如果选择静态,可用于象限图 从“绑定类型”下拉列表中指定参照点的X轴值。
  • 参考点> Y轴: 如果选择静态,可用于象限图 从“绑定类型”下拉列表中指定参照点的Y轴值。
  • 参考点>系列的数据模型对象: 如果您选择数据模型对象,则可用于多个系列象限图 从“绑定类型”下拉列表中。 定义表单数据模型对象属性以标识参考点的系列。
  • 参考点>系列的数据模型对象值: 如果您选择数据模型对象,则可用于多个系列象限图 从“绑定类型”下拉列表中。 使用系列的表单数据模型对象属性以及在此字段中定义的值来标识参考点的系列。
  • 参考点>参考点的数据模型对象: 如果选择数据模型对象,可用于象限图 从“绑定类型”下拉列表中。 定义表单数据模型对象属性,该属性是绘制在X轴和Y轴上的属性的同级。 此外,对于多个系列,定义一个数据模型对象属性,该属性是为系列定义的数据模型对象属性的子实体。
  • 参考点>参考点的数据模型对象值: 可用于象限图表(如果选择数据模型对象) 从“绑定类型”下拉列表中。 使用参考点的表单数据模型对象属性以及在此字段中定义的值来标识图表的参考点。
    象限标签>左上角: 可用于象限图以指定左上象限的名称。
  • 象限标签>右上方: 可用于象限图以指定右上象限的名称。
  • 象限标签>右下方: 可用于象限图以指定右下象限的名称。
  • 象限标签>左下方: 可用于象限图以指定左下象限的名称。
打印和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;
}

编写自定义函数后,请执行以下操作以使其可用于图表配置:

  1. 在与相关交互式通信关联的客户端库中添加自定义函数。 有关详细信息,请参阅配置提交操作使用客户端库

  2. 要在“函数”下拉列表中显示自定义函数,请在CRXDe Lite的apps文件夹中创建具有以下属性的nt:unstructured节点:

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

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

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

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

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

函数现在可用于图表中。

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

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

让我们通过使用交互式通信生成的卡语句来详细了解基本属性中最低要求的信息。 假设您要生成一个图表来描述对帐单中不同费用的金额。 要使用不同类型的图表进行交互式通信的打印和Web输出。

用于打印的柱状图 columnchartprint

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

  • 名称 — 指定图表的名称。
  • 图表类型 — 从下拉列表中选择​
  • 标题 — 指定X轴的费用类型和Y轴的交易金额。
  • 数据模型对象 — 选择数据模型对象属性以创建X轴(费用类型)和Y轴(交易金额)的数据绑定。

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

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

适用于Web的圆环图 donutchartweb

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

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

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

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

示例2:在折线图中应用“和”和“频率”函数 applicationsumfrequency

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

不带函数的折线图,带有两个“AirBnB借记”交易记录

不带函数的折线图,带有两个“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轴参照点的值。

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

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

象限图

recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2