ActiveReportsJS的报表设计器,是一款集编辑、预览、导出为一体的跨平台报表设计器,拖拽式报表开发模式,内置矩表、表格、图表等组件,无需任何服务器和组件支持,即可在 Mac、Linux、Windows 等平台中,快速创建中国式复杂报表和各种交互式报表。

ActiveReportsJS 报表设计器的组成

设计界面

您可以使用“设计界面”左侧工具箱中的报表组件来创建报表。

在工具箱面板中,列出了所有可用组件,通过双击或将组件拖放到设计器中进行使用。

除了可用组件外,左侧面板还包含了“报告资源管理器”,用来显示报表的所有元素和控件种类。

数据面板

在设计器的右侧,为“数据面板”,可用于配置数据源和数据集。

属性面板

在数据面板下方,还有属性面板。在这里,您将找到所选控件或元素的属性。

默认情况下,“属性面板”显示的是各元素最常用属性,您可以切换到“高级模式”以显示所选控件或元素的所有属性。

“属性面板”具备搜索功能,可用于搜索属性。

ActiveReportsJS 报表设计器的功能特点

数据源

ActiveReportsJS支持使用 ** JSON ** 数据源来构建报表,这是一种轻量级且基于文本的可读格式。除了 .json 文件之外,任何具有有效JSON格式的文件都可以用作数据源。若需了解更多信息,请参阅ActiveReportsJS 数据绑定

表达式

表达式用于设置报表中各控件的值,或用于设置某些样式的条件。若需了解更多信息,请参阅ActiveReportsJS 表达式

交互式报表设计

ActiveReportsJS 的设计器支持钻取、数据深化、交互式排序等功能。交互式报表提供了更加动态、灵活的数据分析能力。若需了解更多信息,请参阅ActiveReportsJS 交互式功能

参数

参数可用于数据集查询,您可以添加单个或多个值参数,选择提示用户输入参数或完全隐藏参数。了解更多信息,请参阅ActiveReportsJS 参数

报表控件

“页面报表”和“RDL报表”工具箱提供了许多报表控件,用于在创建报表时进行可视化设计。了解详细信息,请参阅ActiveReportsJS 报表控件

如何使用ActiveReportsJS设计器创建报表

如视频中演示的那样,我们创建一张简单的报表,该报表从数据库中加载了一些数据并将其显示在表格内。

第一步,创建报表

打开“文件”菜单,选择RDL报表。

第二步,转到数据面板并添加数据源。

使用嵌入式文件选项,加载带有数据条目的JSON文件。完成后,JSON文件的内容将显示在“嵌入式​​内容”框中。此时,让我们将数据源的默认名称更改为更具代表性的名称,然后单击“添加数据源”。

第三步,创建一个数据集,用以查询并选择您感兴趣的数据字段。

在查询字段中,选择JSON文件的所有内容。在左侧面板上,打开工具箱并找到Table组件。双击以将Table放置在报表设计器界面上。

第四步,扩展表格的宽度并添加几列。

默认情况下,表格共显示三行。第一行是表头,中间是表格内容,最下面一行是表脚。

要添加列,请选择“表头”,单击鼠标右键,然后选择“ COLUMNSRIGHT”或“ LEFT”,在所选列的右或左插入一列。

要在表中绑定数据,只需在“表格内容”部分单击ADORNERS,从数据集中选择可用字段。

最后一步,预览报表。

单击工具栏上的预览按钮,就可以实时预览到结果。

要返回设计界面,请单击左上方的“后退”箭头。

要保存这张报表模板,请转到“文件”菜单,然后单击“保存”或“另存为”。

注:ActiveReportsJS的报表文件另存为“ .rdlx-json”格式。

至此,一张简单的报表就已经创建完成了,您可以将它添加到应用程序中,并使用报表查看器进行查看。