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 控件,我们只需输入一些可用于联系报表所有者的电话号码,但对于第三个,我们将使用一个表达式,以便它始终显示当前年份。
在第三个文本框中,放置以下值:© {Year(Now())} GrapeCity, Inc. 保留所有权利。您可以在字符串内部看到我们包含的大括号,以及大括号内的表达式Year(Now()) ; 这将返回当前年份,并且报告知道将其计算为表达式,因为我们已将其放在大括号内。
进行一些样式设置后,页脚应如下所示:
我们可以预览报告以查看我们创建的表达式的计算结果:
现在我们已经创建了页眉和页脚,它们将显示在每个报告页面上。在下一部分中,我们将通过显示有关学生的一些基本信息来添加已加载的一些数据。
显示学生信息
现在是时候开始合并报告正在加载的一些数据了。首先,将 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>
这将删除 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 可以轻松构建自定义进度报告,使教师和学生能够跟踪学生整个学年的进度。