本文介绍了ActiveReportsJS设计器的组成、功能特点，以及如何使用ActiveReportsJS设计器创建报表。
ActiveReportsJS是一款基于 HTML5的纯前端报表控件，采用拖拽式报表开发模式，无需任何服务器和组件支持，即可在Mac、Linux 和 Windows 平台中，轻松设计中国式复杂报表、类 Excel/Word报表、DashBoard仪表板等多种报表类型。除提供强大的报表设计能力之外，ActiveReportsJS还具备纯前端报表展示、多数据源绑定、前端精准打印/导出等功能，借助其灵活丰富的API ，可为您带来无与伦比的报表开发体验。
ActiveReportsJS正式版
ActiveReportsJS的报表设计器，是一款集编辑、预览、导出为一体的跨平台报表设计器，拖拽式报表开发模式，内置矩表、表格、图表等组件，无需任何服务器和组件支持，即可在 Mac、Linux、Windows 等平台中，快速创建中国式复杂报表和各种交互式报表。
ActiveReportsJS 报表设计器的组成
设计界面
您可以使用“设计界面”左侧工具箱中的报表组件来创建报表。
在工具箱面板中，列出了所有可用组件，通过双击或将组件拖放到设计器中进行使用。
除了可用组件外，左侧面板还包含了“报告资源管理器”，用来显示报表的所有元素和控件种类。
数据面板
在设计器的右侧，为“数据面板”，可用于配置数据源和数据集。
属性面板
在数据面板下方，还有属性面板。在这里，您将找到所选控件或元素的属性。
默认情况下，“属性面板”显示的是各元素最常用属性，您可以切换到“高级模式”以显示所选控件或元素的所有属性。
“属性面板”具备搜索功能，可用于搜索属性。
ActiveReportsJS 报表设计器的功能特点
数据源
ActiveReportsJS支持使用 ** JSON ** 数据源来构建报表，这是一种轻量级且基于文本的可读格式。除了 .json 文件之外，任何具有有效JSON格式的文件都可以用作数据源。
表达式
表达式用于设置报表中各控件的值，或用于设置某些样式的条件。
交互式报表设计
ActiveReportsJS 的设计器支持钻取、数据深化、交互式排序等功能。交互式报表提供了更加动态、灵活的数据分析能力。若需了解更多信息，请参阅ActiveReportsJS 交互式功能。
参数
参数可用于数据集查询，您可以添加单个或多个值参数，选择提示用户输入参数或完全隐藏参数。
报表控件
“页面报表”和“RDL报表”工具箱提供了许多报表控件，用于在创建报表时进行可视化设计。了解详细信息，请参阅ActiveReportsJS 报表控件。
如何使用ActiveReportsJS设计器创建报表
如视频中演示的那样，我们创建一张简单的报表，该报表从数据库中加载了一些数据并将其显示在表格内。
第一步，创建报表
打开“文件”菜单，选择RDL报表。
第二步，转到数据面板并添加数据源。
使用嵌入式文件选项，加载带有数据条目的JSON文件。完成后，JSON文件的内容将显示在“嵌入式内容”框中。此时，让我们将数据源的默认名称更改为更具代表性的名称，然后单击“添加数据源”。
第三步，创建一个数据集，用以查询并选择您感兴趣的数据字段。
在查询字段中，选择JSON文件的所有内容。在左侧面板上，打开工具箱并找到Table组件。双击以将Table放置在报表设计器界面上。
第四步，扩展表格的宽度并添加几列。
默认情况下，表格共显示三行。第一行是表头，中间是表格内容，最下面一行是表脚。
要添加列，请选择“表头”，单击鼠标右键，然后选择“ COLUMNSRIGHT”或“ LEFT”，在所选列的右或左插入一列。
要在表中绑定数据，只需在“表格内容”部分单击ADORNERS，从数据集中选择可用字段。
最后一步，预览报表。
单击工具栏上的预览按钮，就可以实时预览到结果。
要返回设计界面，请单击左上方的“后退”箭头。
要保存这张报表模板，请转到“文件”菜单，然后单击“保存”或“另存为”。
注：ActiveReportsJS的报表文件另存为“ .rdlx-json”格式。
至此，一张简单的报表就已经创建完成了，您可以将它添加到应用程序中，并使用报表查看器进行查看。
本教程内容就是这样了，希望对您有所帮助！您可以下载ActiveReportsJS试用版免费体验~
相关内容推荐：
纯前端报表控件 ActiveReportsJS入门教程：如何将ActiveReportsJS的强大功能嵌入到Web应用
想要购买ActiveReportsJS正版授权，或了解更多产品信息请点击【咨询在线客服】
标签：
来源：慧都
声明：本站部分文章及图片转载于互联网，内容版权归原作者所有，如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢！