用 JavaScript 构建学生进度报告

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

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

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

内容概述

• 将数据连接到报告

• 创建进度报告页眉和页脚

• 显示学生信息

• 建立 GPA 总结和学业进度表

• 创建行为和态度进度表

• 创建考勤表

• 将 ActiveReportsJS 添加到 JavaScript 应用程序

  
  

如果您想阅读本文，您可以在此处找到完整的报告和应用程序。

将数据连接到报告

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

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

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

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

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

完成后，它应该如下所示：

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

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

输入 JSON 路径后，点击“验证”按钮以确认您的数据集可以检索请求的数据。

如果一切正常，数据库字段字段现在应该填充我们数据中的值：

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

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

创建进度报告页眉和页脚

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

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

在文本框中，我们将其值设置为“学生进度报告”。

然后，我们将图像控件嵌入到报表中。选择图像控件，然后展开其属性的外观部分中的图像下拉列表。要嵌入图像，请单击“嵌入”按钮，然后单击“**加载...**”打开文件资源管理器并选择要加载的图像：

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

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

将三个 TextBox 控件和两个 Image 控件拖到页面的页脚区域。我们将按照上面概述的相同步骤来设置图像。

对于其中两个 TextBox 控件，我们只需输入一些可用于联系报表所有者的电话号码，但对于第三个，我们将使用一个表达式，以便它始终显示当前年份。

在第三个文本框中，放置以下值： © {Year(Now())} GrapeCity, Inc. 保留所有权利。您可以在字符串内部看到我们包含的大括号，以及大括号内的表达式Year(Now()) ;这将返回当前年份，并且报告知道将其计算为表达式，因为我们已将其放在大括号内。

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

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

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

显示学生信息

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

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

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

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

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

在关联的文本框中包含以下文本：

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

建立 GPA 总结和学业进度表

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

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

在此容器内，我们想要显示学生的总体 GPA 以及他们的百分位数。

将四个文本框拖到容器中，如下设置：

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

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

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

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

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

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

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

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

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

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

添加行为和态度进度表

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

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

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

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

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

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

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

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

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

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

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

这将使 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>

这将删除 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 文件相同的文件夹中；如果不这样做，请务必指出报告的正确位置。

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

结论

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

如果您想下载本文中构建的报告和应用程序，可以在此处找到存储库。

快乐编码！