使用 ActiveReportsJS 在线查看学生进度报告

ActiveReportsJS在线查看学生进度报告的能力为家长和教育工作者带来了许多好处。在线访问为家长和学生提供了对学生学习成绩的实时洞察，使他们能够随时了解情况并参与教育。他们可以轻松跟踪进度、监控出勤情况、查看成绩并确定可能需要额外支持的领域。

对于教育工作者来说，在线进度报告简化了报告流程，使生成和共享学生表现的全面评估变得更加容易。它使教师能够与家长更有效地沟通，促进合作并进行有针对性的干预。总体而言，在线访问学生进度报告可以增强沟通，促进问责制，并支持积极主动的方法来帮助学生取得成功。

值得庆幸的是，ActiveReportsJS 使教育工作者可以轻松构建和自定义这些进度报告，并可以轻松地在 Web 应用程序中查看它们。本文将向您展示如何使用 ActiveReportsJS 报表设计器创建进度报表并使用报表查看器在 JavaScript 应用程序中显示报表。我们将讨论以下主题：

如果您想阅读本文，可以在此处下载 ActiveReportsJS 的免费试用版。此外，您还可以在此处找到完整的报告和申请表。

将数据连接到报告

就本文而言，我们将使用 ActiveReportsJS 下载中包含的独立设计器。安装并启动设计器后，我们将能够看到空报告。在开始向报表添加控件之前，我们需要确保将要使用的数据链接到报表。

在设计器的右上角，选择“数据”面板。这将显示我们的数据源、数据集和参数：

首先，我们需要一个数据源。单击“数据源”部分中的“添加”按钮，打开“数据源”窗口：

从这里，我们可以告诉报告在哪里寻找数据。关于数据的来源，我们有两种选择：远程 JSON或嵌入式 JSON。远程 JSON 要求您提供 API 端点的 URL，而嵌入式 JSON 允许您选择用于将数据直接加载到报告中的 JSON 文件。

对于本报告，我们将使用嵌入式 JSON 来加载多个 JSON 文件；我们有学生信息、分数、行为和出勤的文件，因此我们需要为每个文件创建一个数据源。完成后，它应该如下所示：

现在我们已经设置了四个数据源，是时候为每个数据源创建一个数据集了。要为数据源创建数据集，只需单击要使用的数据源旁边的加号图标即可；这将打开数据集窗口：

由于我们使用嵌入式 JSON，因此我们需要提供的只是一个 JSON 路径；这告诉报告我们想要从 JSON 中检索哪些数据。在本例中，我们想要检索所有 JSON，因此我们使用路径$.*。这告诉报告获取所有可用数据。

注意：如果您使用远程 JSON，则还需要提供 Uri/路径值；该值从报告传递到 API，以告诉 API 要返回哪些数据。

输入 JSON 路径后，单击“验证”按钮以确认您的数据集可以检索请求的数据。如果一切正常，数据库字段字段现在应该填充我们数据中的值：

一旦我们为每个数据源设置了数据集，我们的数据面板应该如下所示：

就是这样！现在我们已经将数据连接到我们的报告中，我们可以在控件中引用这些数据。在下一节中，我们将开始构建报告的不同部分，从页眉和页脚开始。

创建进度报告页眉和页脚

现在数据已经设置完毕，我们可以开始创建报表元素。首先，我们将为报告中的页面创建页眉和页脚。在工具栏中，选择“部分”选项卡，然后单击“添加页眉”和“添加页脚”按钮：

这会将页眉和页脚部分添加到报告中。我们想要从标题部分的控件工具箱添加两个控件。单击设计器左上角的汉堡包按钮以展开工具箱，然后将TextBox和Image控件拖到页眉中。

在文本框中，我们将其值设置为“学生进度报告”。然后，我们将图像控件嵌入到报表中。选择“图像”控件，然后展开其属性“外观”部分中的“图像”下拉列表。要嵌入图像，请单击“嵌入”按钮，然后单击“加载...”以打开文件资源管理器并选择要加载的图像：

现在我们的图像已加载并设置了文本，我们将通过“属性”面板进行一些调整大小和样式设置。完成后，我们的标题部分如下所示：

现在是时候创建页脚了。在页脚中，我们需要包含 3 个文本框：两个包含联系信息，一个用于显示当前年份。在包含联系信息的每个框旁边，我们还希望包含一个电话图标，以表明这些是电话号码。

将三个 TextBox 控件和两个 Image 控件拖到页面的页脚区域。我们将按照上面概述的相同步骤来设置图像。对于其中两个 TextBox 控件，我们只需输入一些可用于联系报表所有者的电话号码，但对于第三个，我们将使用一个表达式，以便它始终显示当前年份。

进行一些样式设置后，页脚应如下所示：

我们可以预览报告以查看我们创建的表达式的计算结果：

现在我们已经创建了页眉和页脚，它们将显示在每个报告页面上。在下一部分中，我们将通过显示有关学生的一些基本信息来添加已加载的一些数据。

显示学生信息

现在是时候开始合并报告正在加载的一些数据了。首先，将 TextBox 和 Container 控件拖到报表主体上。展开两者，以便它们扩展页面的大部分宽度，并在 TextBox 控件内部包含文本“学生信息”：

我们将使用此容器来保存与学生相关的所有信息。

现在，我们将文本框放置在容器内；这些将用于标签并保存数据集中的信息。

设置容器以匹配以下内容：

现在，在每个空文本框内，我们希望包含从学生信息数据集中检索数据的表达式。在关联的文本框中包含以下文本：

标签	文本框值
报名编号：	{注册ID}
开学报道日：	{DateTime.Now().AddYears(-8)}
学生姓名：	{学生姓名}
年级：	{年级}
年：	{年(now()) - 1} - {年(DateTime.Now())}
出生日期：	{IIF(月份(DateTime.Now()) < 7, DateTime.Now().AddYears(-13).AddMonths(2), DateTime.Now().AddYears(-13).AddMonths(-3))}
父亲姓名：	{父亲姓名}
母亲的名字：	{母亲姓名}
电话号码：	{电话号码}
地址：	{地址}

完成后，您应该能够预览报告并看到以下内容：

建立 GPA 总结和学业进度表

接下来，我们将显示与学生成绩相关的信息。

首先，我们将创建 GPA 摘要部分；与上一节一样，将 TextBox 和 Container 控件拖到报表上。展开两者，以便它们扩展页面的大部分宽度，并在 TextBox 控件内部包含文本“GPA Summary”：

在此容器内，我们希望显示学生的总体 GPA 以及他们的百分位数。将四个文本框拖到容器中，如下设置：

接下来，我们需要在空文本框中设置更多表达式：

标签	文本框值
总绩点	{IIF(Round((Avg(MarksT1, "标记") + Avg(MarksT2, "标记") + Avg(MarksT3, "标记")) / 3, 2) > 90, 4, IIF(Round((Avg( MarksT1, "标记") + Avg(MarksT2, "标记") + Avg(MarksT3, "标记")) / 3, 2) > 80, 3, IIF(Round((Avg(MarksT1, "标记") + Avg (MarksT2, "标记") + Avg(MarksT3, "标记")) / 3, 2) > 70, 2, IIF(Round((Avg(MarksT1, "标记") + Avg(MarksT2, "标记") +平均值(MarksT3, "标记")) / 3, 2) > 60, 1, 0))))}
百分位数	{Round((Avg(MarksT1, "标记") + Avg(MarksT2, "标记") + Avg(MarksT3, "标记")) / 3, 2) / 100}

总体 GPA 表达式将计算他们所属的百分位数，然后基于此提供关联的数字 GPA 值。百分位表达式只是根据百分比计算他们的成绩。

完成后，您应该能够在预览报告时看到以下内容：

现在我们已经创建了摘要，是时候按科目显示学生进度的详细信息了。在 GPA 摘要部分下方，将文本框和表格控件拖到报告正文上。在文本框中包含文本“Academic Progress”，在表格内包含以下列标题：

主题
老师
第 1 学期
第二学期
第三学期

完成后，它应该看起来像这样：

我们需要做的下一件事是将正确的数据集与表关联起来。选择“表”控件，然后在“属性”面板内，将“数据集名称”下拉列表设置为使用标记数据集。现在我们可以在表中引用该数据集中的数据。

填写表的其余部分，如下所示：

细胞	价值
详细信息行单元格 1	{主题}
详细信息行单元格 2	{学科老师}
详细信息行单元格 3	{IIF(MarksT1 >= 90, "A", IIF(MarksT1 >= 80, "B", IIF(MarksT1 >= 70, "C", IIF(MarksT1 >= 60, "D", "E/F" ））））}
详细信息行单元格 4	{IIF(MarksT2 >= 90, "A", IIF(MarksT2 >= 80, "B", IIF(MarksT2 >= 70, "C", IIF(MarksT2 >= 60, "D", "E/F" ））））}
详细信息行单元格 5	{IIF(MarksT3 >= 90, "A", IIF(MarksT3 >= 80, "B", IIF(MarksT3 >= 70, "C", IIF(MarksT3 >= 60, "D", "E/F" ））））}
页脚行单元格 1
页脚行单元格 2	累计GPA：
页脚行单元格 3	{IIF(Avg(Convert.ToInt32(MarksT1)) > 90, 4, IIF(Avg(Convert.ToInt32(MarksT1)) > 80, 3, IIF(Avg(Convert.ToInt32(MarksT1)) > 70, 2, IIF (平均(Convert.ToInt32(MarksT1)) > 60, 1, 0))))}
页脚行单元格 4	{IIF(Avg(Convert.ToInt32(MarksT2)) > 90, 4, IIF(Avg(Convert.ToInt32(MarksT2)) > 80, 3, IIF(Avg(Convert.ToInt32(MarksT2)) > 70, 2, IIF (平均(Convert.ToInt32(MarksT2)) > 60, 1, 0))))}
页脚行单元格 5	{IIF(Avg(Convert.ToInt32(MarksT3)) > 90, 4, IIF(Avg(Convert.ToInt32(MarksT3)) > 80, 3, IIF(Avg(Convert.ToInt32(MarksT3)) > 70, 2, IIF (平均(Convert.ToInt32(MarksT3)) > 60, 1, 0))))}

经过一些额外的样式设置后，Table 控件现在看起来如下所示：

当我们预览报告时，表格应如下所示：

添加行为和态度进度表

现在用户可以查看他们的学业进步，是时候添加一个部分来显示老师对学生的行为和态度进步的评分。在此之前，我们将在报告中添加一个新部分。在报表设计器的底部，您将看到一个“添加部分”按钮；按此按钮，它将向您的报告添加新的页面/连续部分：

现在，在此新部分的标题下方，添加一个 TextBox 控件、一个 Container 控件以及 Container 控件内的三个 TextBox 控件：

正如您所看到的，我们已经用我们自己的文本填写了这些文本框。在添加 Tablix 控件之前，我们想要再进行一项修改。

在这些表中，我们希望使用图标来显示学生在“优秀”、“满意”和“需要改进”方面的表现。我们将使用绿色、黄色和红色图标。要添加这些值，请将以下值添加到关联 TextBox 的Image属性：

文本框	价值
出色的	资料来源：数据库值：{IconSet("TrafficLights", true, false, false, false, false)}
满意的	资料来源：数据库值：{IconSet("TrafficLights", false, true, false, false, false)}
需要改进	资料来源：数据库值：{IconSet("TrafficLights", false, false, true, false, false)}

现在，如果我们预览报告，我们应该看到以下内容：

现在 Tablix 容器已设置完毕，是时候添加 Tablix 控件来显示行为和态度进度数据了。将 Tablix 控件拖到此容器中；您将看到 Tablix 向导在设计器窗口中弹出：

Tablix 向导是一个非常强大的工具，用于创建 Tablix（或众所周知的数据透视表）控件，它可以比标准表更动态的方式显示数据。

我们将使用我们在文章开头创建的行为数据集中的数据。展开此数据集，然后将BehavioralMeasure值拖放到向导的“行组”部分，并将T1、T2和T3值拖放到向导的“值”部分。请务必将 T1、T2 和 T3 的聚合值从Count更改为None。

完成之前，单击向导中的“过滤器”按钮；我们需要为此表设置一个过滤器。在这里，单击“添加”按钮添加新过滤器。将第一个框设置为数据集的“类型”字段，然后设置过滤器以查找字符串“Work Habit”：

完成后，您可以点击“确定”按钮并查看 Tablix 此时的外观：

现在，与“非常 满意” 和“需要改进”文本框一样，我们将更新 T1、T2 和 T3 列的数据单元格以显示图标而不是文本值。对于每个数据单元格，删除文本值并更新关联 TextBox 的Image属性：

细胞	价值
T1	资料来源：数据库值: {IconSet("TrafficLights", IIF(T1 = "E", true, false), IIF(T1 = "M", true, false), IIF(T1 = "N", true, false), false,错误的）}
T2	资料来源：数据库值: {IconSet("TrafficLights", IIF(T2 = "E", true, false), IIF(T2 = "M", true, false), IIF(T2 = "N", true, false), false,错误的）}
T3	资料来源：数据库值: {IconSet("TrafficLights", IIF(T3 = "E", true, false), IIF(T3 = "M", true, false), IIF(T3 = "N", true, false), false,错误的）}

这将使 Tablix 控件根据单元格值在单元格中放置正确的交通灯图标。经过一些样式更新后，我们的第一个 Tablix 应该如下所示：

当我们预览报告时，Tablix 应如下所示：

现在，我们需要创建第二个 Tablix 控件来显示姿态信息。好的一点是，这个 Tablix 与我们刚刚创建的 Tablix 几乎相同。复制并粘贴我们创建的第一个 Tablix，然后将其放置在另一个 Tablix 正下方的容器中。然后，将第一个标题单元格从“工作习惯”更新为“遵守行为准则”。

最后，选择第二个 Tablix 控件，然后单击该控件右上角的齿轮图标；这将重新打开 Tablix 向导。单击过滤器按钮；我们将修改当前使用的过滤器。

将过滤器文本值从“工作习惯”更新为“课堂行为”。现在，“行为和态度进展”部分应如下所示：

当我们预览报告时，“行为和态度进展”部分应如下所示：

添加考勤表

我们要添加到报告中的最后一部分将显示学生的出勤情况。将 TextBox 控件和 Tablix 控件拖到报表上，并将它们放置在“行为和态度进度”部分下方。

在 Tablix 向导中，我们将使用出勤数据集；将Days值拖到向导的Row Groups部分，然后将T1、T2和T3值拖到向导的Values部分。另外，请务必将T1、T2和T3的聚合值设置为Sum：

现在，出勤部分应如下所示：

当我们预览报告时，它应该如下所示：

现在，报告完成后，当我们预览报告时，页面应如下所示：

将 ActiveReportsJS 添加到 JavaScript 应用程序

现在我们已经创建了学生进度报告，是时候将 ActiveReportsJS 报告查看器添加到 JavaScript 应用程序，以便我们可以在浏览器中查看报告。创建一个名为index.html的新文件，然后在您选择的 IDE 中打开该文件。我们将添加以下代码到文件中：

<!DOCTYPE html>

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Student Progress Report</title>
    <meta name="description" content="ARJS Report viewer" />
    <meta name="author" content="GrapeCity" />
  </head>
  <body></body>
</html>

复制

现在 HTML 文件已设置完毕，是时候将 ActiveReportsJS 添加到该文件了。为此，我们将使用 CDN 加载所需的文件。在<head>标签内添加以下代码：

<link rel="stylesheet" href="https://cdn.grapecity.com/activereportsjs/4.latest/styles/ar-js-ui.css" type="text/css" />
<link rel="stylesheet" href="https://cdn.grapecity.com/activereportsjs/4.latest/styles/ar-js-viewer.css" type="text/css" />
<script src="https://cdn.grapecity.com/activereportsjs/4.latest/dist/ar-js-core.js"></script>
<script src="https://cdn.grapecity.com/activereportsjs/4.latest/dist/ar-js-viewer.js"></script>
<script src="https://cdn.grapecity.com/activereportsjs/4.latest/dist/ar-js-pdf.js"></script>
<script src="https://cdn.grapecity.com/activereportsjs/4.latest/dist/ar-js-tabular-data.js"></script>
<script src="https://cdn.grapecity.com/activereportsjs/4.latest/dist/ar-js-html.js"></script>

前两行代码加载所需的 CSS 文件：核心 CSS 文件和查看器 CSS 文件。然后，我们加载核心 JavaScript 文件和查看器 JavaScript 文件。最后，我们加载 pdf、表格数据和 HTML JavaScript 文件；这些文件使用户能够以各自的文件类型导出报告。

如果您不想允许用户以特定格式导出报告，您所需要做的就是排除关联的<script>标记，用户将无法以该文件类型导出。

接下来，我们将为页面上的元素添加一些基本样式。在<head>标签内，我们刚刚添加的 script 标签下方，添加以下代码：

<style>
    body {
        margin: 0;
    }
    #viewer-host {
      width: 100%;
      height: 100vh;
    }
</style>

COPY

这将删除 body 元素的边距，并且还将使用viewer-host的 ID 设置元素的宽度和高度。

现在，在<body>标记内添加以下元素：

<div id="viewer-host"></div>

复制

我们给这个div指定了viewer-host的ID ；这意味着它将接收我们之前设置的 CSS 样式，但它也将允许我们将 JavaScript 报表查看器绑定到 div。

最后，在 div 下方添加以下代码：

<script>
    var viewer = new ActiveReports.Viewer("#viewer-host");
    viewer.open("StudentProgressReport.rdlx-json");
</script>

复制

此 JavaScript 将创建一个新的 ActiveReportsJS 查看器，将其与 ID为viewer-host 的元素关联起来。然后，我们调用查看器的 open 方法并传入我们的报告名称。

您需要确保的最后一件事是将报告放置在与您的index.html 文件相同的文件夹中；如果不这样做，请务必指出报告的正确位置。

剩下的唯一事情就是运行应用程序。您可以使用任何静态 Web 服务器来运行该应用程序；由于我们使用 Visual Studio Code，因此我们使用Live Server扩展来快速启动静态 Web 服务器。当您在浏览器中打开该应用程序时，您应该看到以下内容：

结论

这就是全部！正如您所看到的，ActiveReportsJS 可以轻松构建自定义进度报告，使教师和学生能够跟踪学生整个学年的进度。