自适应表单图表 af-charts

图表或图形是数据的可视化表示形式。 它允许您将大量信息压缩为易于理解的视觉格式，使您能够更好地可视化、解释和分析复杂数据。
AEM Forms附加组件包提供了一个现成的Chart组件。 您可以在自适应表单和文档中使用以在​ 可重复面板 ​和​ 表 ​中直观地呈现二维数据。 图表组件允许您添加和配置以下类型的图表：

图表组件支持并提供内置的统计函数（总和、平均值、最大值、最小值、模式、中间值、范围和频率），用于计算和绘制图表上的值。 除了开箱即用的函数之外，您还可以编写自己的自定义函数，并在图表中使用它们。

现在，我们来看看如何添加和配置图表组件：

添加图表 add-chart

默认情况下，图表组件在AEM侧边栏中可用。 您可以在创作模式下将图表组件从AEM侧栏拖放到自适应表单或文档。 删除组件时，它将为图表创建占位符。

配置图表 configure-chart

要配置图表，请单击图表组件，然后单击 以打开“编辑图表”对话框。 该对话框包括“标题”和“文本”、“配置”、“高级选项”和“样式”选项卡，允许您配置图表。

基本 basic

在“基本”选项卡中，可以配置以下属性：

配置 configuration

在“基本”选项卡中，您可以定义图表类型、包含数据的源面板或表行、要绘制在图表的X轴和Y轴上的值，还可以选择定义统计函数来计算要在图表上绘制的值。

让我们详细了解一下此选项卡中的信息，请参考信用卡对帐单中的可重复表示例。 假设您要生成一个图表，以描述信用卡对帐单的对帐单详细信息部分中不同类别的总费用并进行关联，如下所示。

要完成此操作，您需要在X轴上绘制类别，并在Y轴上绘制每个类别的总支出。

本示例中使用的信用卡对帐单是自适应表单文档，对帐单详细信息部分是一个表，该表在创作模式下如下所示。

让我们考虑一下生成图表的以下要求和条件：

图例和工具提示如下所示。

样式 styling

在“样式”模式下，您可以配置图表的宽度（以表单或文档中可用总宽度的百分比表示）和高度（以像素为单位）。 其他选项包括文本、背景、边框、效果和CSS覆盖。

要切换到样式模式，请在页面工具栏中​ 点按>>样式。

在图表中使用函数 use-functions

您可以配置图表以使用统计函数计算源数据的值，以便在图表上绘图。 虽然图表组件具有一些内置函数，但您可以编写自己的函数，并在图表配置中使用它们。

默认函数 default-functions

默认情况下，以下函数可用于图表组件：

自定义函数 custom-functions

除了在图表中使用默认函数之外，您还可以在JavaScript中编写自定义函数，并在图表组件的函数列表中提供它们。

函数将一个或多个值和类别名称作为输入并返回一个值。 例如：

Multiply(valueArray, category) {
    var val = 1;
    _.each(valueArray, function(value) {
        val = val * value;
    });
    return val;
}

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

自动刷新图表 auto-refresh-chart

当用户执行以下操作之一时，图表会自动刷新：

在自适应表单规则中使用图表类型 chart-in-rules

chartType属性指定图表的类型。 可能的值为饼图、圆环图、条形图、折线图、线点、点和区域。 它是一个可编写脚本的属性，这意味着您可以在自适应表单规则中使用它来操作图表配置。 让我们通过一个示例来了解它。

假定您配置了柱状图。 但是，您还希望为用户提供一个选项，以便从下拉列表中选择不同的图表类型并重新绘制图表。 您可以使用规则中的chartType属性实现此目的，如下所示：

现在，您可以从下拉列表中选择图表类型，然后单击刷新以重新绘制图表。