【入门指南】ActiveReportsJS 纯前端报表控件

  • 时间:
  • 浏览:1
  • 来源:5分6合_5分6合平台_5分6合网投平台

ActiveReportsJS是一款基于 HTML5 的纯前端报表控件,采用拖拽式报表开发模式,不要任何服务器和组件支持,即可在 Mac、Linux 和 Windows 平台中,轻松设计中国式复杂报表、类 Excel Word 报表、DashBoa

ActiveReportsJS 是一款基于 HTML5 的纯前端报表控件,采用拖拽式报表开发模式,不要任何服务器和组件支持,即可在 Mac、Linux 和 Windows 平台中,轻松设计中国式复杂报表、类 Excel/Word 报表、DashBoard 仪表板等多种报表类型。

通过本指南,您将学习如何快速使用这款报表工具,以及如何将ActiveReportsJS的强大功能嵌入到Web应用中。

一、产品下载

首先,请在此处下载 ActiveReportsJS。产品安装包中暗含Mac、Linux、Windows另3个 平台的安装多多守护进程 ,请根据您的使用平台自行选用。

下载后,请解压文件,并双击 .dmg / .exe / .AppImage 多多守护进程 ,安装报表设计器。

注:ActiveReportsJS 的安装多多守护进程 暗含:报表设计器、查看器和报表导出模块。

二、创建一张JavaScript报表

从加上数据源到创建交互式报表,ActiveReportsJS简单易用的设计器使您不要编写代码,仅需拖拽的法律法律法子,即可完成复杂报表设计。

如需创建报表,请在主菜单栏中选用“文件”选项。“文件”面板打开后,您可选用创建RDL报表或页面报表。

·       RDL报表的主要使用场景是:报表模板可根据渲染区域的大小自适应。

·       页面报表则由布局驱动,更适合严格的布局,以及限制并保持固定大小的报表模板。



加上数据源

ActiveReportsJS 支持的数据源类型是JSON,您可不可不都可以直接使用 JSON Web Services 服务来连接 JSON数据源。

可能性,您也通过本地的 JSON文件加上数据源。 -json文件可不可不都可以与报表发生同一文件夹或子文件夹中,可能性ActiveReportsJS只支持数据文件的相对路径。

此外,ActiveReportsJS还支持在单张报表中加上多个数据源。

第一步,单击右上子菜单中的“数据绑定”图标,打开“数据绑定”面板。

单击“数据源”下的“ +”按钮,弹出以下对话框。



ActiveReportsJS支持以下数据源链接法律法律法子:

1.       使用本地JSON文件

2.       连接到报表服务器

3.       使用连接字符串



可能性您要使用本地JSON文件,请将“ 内嵌”更改为true。一些 ,单击“从文件加载”并选用可用的JSON数据文件。

要连接到报表服务器(內部URL),请将服务器的URIqq克隆好友 地址拷贝到“内容URL”中,如默认生成的链接格式:

jsondoc=http://northwind.netcore.io/customers?format=json

可能性希望直接从本地数据库文件中加载,请点击“內部文件或网址”, 通过“浏览”选用可用的 JSON 文件,您可不可不都可以能编辑自动生成的连接字符串。如:

jsondoc=ProductInfo.json

完成数据源配置后,请单击“加上数据源”完成此步骤。

第二步,创建数据集。(您可不可不都可以通过点击数据源旁边的加号图标,从单个数据源中创建多个数据集)



数据集是获取数据的最后一步,有了数据集,就可不可不都可以访问到具体的数据字段。要创建数据集,您可不可不都可以构造另3个 查询字符串,该字符串返回所需的数据字段。



之类,以下查询字符串将返回Products数组中的所有元素。

$.Products[*]

单击“验证”按钮,可不可不都可以确保查询字符串捕获正确的字段。当验证成功后,会生成可绑定的字段,您可不可不都可以能在数据集上使用过滤器。

点击确认按钮,数据集就加上成功了,此时,数据集下方会展示可用的字段名称。

三、设计你的报表模板

设置好数据源和数据集后,就可不可不都可以开始英文设计报表布局了。

ActiveReportsJS的设计器内嵌了一些报表组件,在设计器左侧的控制面板中展示了每个报表组件的图标。单击“菜单”图标,可不可不都可以展开左侧控制面板

报表组件包括表格、条形码、图像、目录、图表等。

在此示例中,我将加上另3个 表格(Table)组件,并展示一些数据。

加上表格(Table)组件

您可通过双击或拖动组件来使用它。将表格(Table)组件拖拽到设计器布局中,默认情况下表格显示为3行3列,这三行内容分别为:

1.       表头

2.       表格内容

3.       表脚、页脚

在“表格内容”中,可不可不都可以使用表达式绑定数据。您可根据运行时数据集条目的数量,将一些行数据加上到此帕累托图。



在报表设计时,您可不可不都可以加上或删除任意行列,可不可不都可以能加上分组。

表格组件可不可不都可以绑定数据字段来实现数据加载,您可不可不都可以直接将字段列表中的某一字段拖拽到表格的单元格当中,实现数据加载。

右键单击表删改信息行中的任何文本框(单元格),即可查看上下文菜单。

当您将鼠标悬停在单元格时,单元格中会经常总出 另3个 “字段选用装饰器”的选项,单击它,就可不可不都可以选用要绑定到单元格的字段。

执行了“字段选用装饰器”后,单元格将暗含选定值的表达式。在“表格内容”中选用表达式也会将该字段绑定到整个列。若要在单元格中显示一些数据,请在 “表格内容”中加上更多表达式。



在本示例中,我选用了以下字段,并删除了表脚。可能性从数据集中选用另3个 字段,表格的表头帕累托图可能性自动填充



如上图,最后一列是产品的总价值(单价*库存单位)。

此时,点击预览报表,将显示如下结果:



当然,您可不可不都可以利用报表组件的“样式属性”强化其可视化效果:



四、将ActiveReportsJS加上到您的应用多多守护进程 中

ActiveReportsJS通过查看器来呈现报表模板。只需几行代码,即可将ActiveReportsJS查看器轻松嵌入到Web应用多多守护进程 中。

您可不可不都可以将ActiveReportsJS的配置文件引用到此应用多多守护进程 。

配置(Setup)

首先创建另3个 简单的Web应用多多守护进程 ,只需暗含另3个 基本的HTML文件。

例:

<html>

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<title>ActiveReportsJS Demo

(本内容属于网络转载,文中涉及图片等内容如有侵权,请联系编辑删除)