报表制作入门

更新时间:2021-07-15

新建报表

首先从空间广场中选择一个空间(您必须是该空间的管理员)并进入:

图片

在左侧的管理中心中进入「报表管理」,点击新建报表页面并新建一个报表:

图片

新建好后,会直接进入新建的空报表页面

添加图表并绑定 SQL 模型

新建的报表页面会直接进入编辑页面中,如果退出编辑后空报表页面中没有内容,点击右上角的编辑按钮可以再次进入编辑模式:

图片

在顶部栏中选择折线图:

图片

点击刚添加的折线图,右侧的控制面板会展示该折线图的配置项,在「数据」标签页中,选用 SQL 建模的方式来绑定图表数据:

图片

现在还没有 SQL 模型,点击上图中加号「新建 SQL 模型」,可见到:

图片

  • 首先填写模型的名称,并选择之前在准备工作中已经创建好的数据源
  • 然后编写查询数据的 SQL 语句(sql语句默认limit是5000,可以通过添加limit覆盖默认limit)
  • 最后将需要的字段添加到模型中,并设置好相应的数据类型

SQL 模型的详细可参见:「SQL 方式绑定数据」。

接下来在折线图的控制面板中,将 X 轴和 Y 轴与对应的数据列绑定:

图片

点击上图中「调试」按钮会弹出如下调试界面:

图片

在编辑报表的过程中请一定善用「调试」功能,在这里可以定位到绝大部分问题。

在调试中我们可以看到:

  • 过滤条件作为参数被 POST 到后端(目前没有过滤条件,所以这里是空)
  • 您输入的原始 SQL 语句
  • 最终生成的在数据库中查询的 SQL 语句
  • SQL 查询的原始结果
  • Sugar BI进行转化操作后的中间结果
  • 格式化为图表可以读取的数据 JSON 格式结果

如果都没有问题,点击刷新图表,就可以看到结果了:

图片

图表的详细配置请参考「图表制作概述」。

上面的步骤已经描述了一个简单的报表使用场景。但是,如果您需要对数据进行过滤,可以让浏览报表的用户可以和页面进行交互,从而让展示的数据动态化,那么您需要浏览下面的章节。

添加过滤条件

以『日期范围』作为示例,在页面顶部选择日期范围过滤条件:

图片

单击选中刚添加的日期范围过滤条件,在该过滤条件的右侧控制面板「基础」标签页下填写「查询 key 值」为dateRange

图片

可以配置日期范围过滤条件的默认值、可选范围等,过滤条件的详细配置请参考「过滤条件概述」。

将过滤条件与图表关联

接下来我们将这个过滤条件和折线图的 SQL 模型进行关联。

单击折线图,右侧控制面板中,编辑刚才新建的 SQL 模型:

图片

在 SQL 语句中嵌入刚刚添加的日期范围查询条件,下图红框中的dateRange和上面我们给日期范围过滤条件填写的查询 key 值相对应:

图片

不同的过滤条件在伪 SQL 语句中的语法各不相同,详情请查看「SQL 语句中关联过滤条件」。

在日期范围过滤条件中填入想查询的日期:

图片

点击折线图,并点击控制面板中「数据」中的「调试」:

图片

可以看到,伪 SQL 语句中的自定义语法在真正执行的 SQL 中被替换为了您填写的过滤条件。并且 SQL 查询的结果也符合过滤条件的要求。

此时,你可以随意改变过滤条件中的值,然后点击过滤条件下的「查询」按钮,折线图的数据就会根据您的过滤条件而动态改变:

图片

至此,保存并退出编辑,您就完成了您的第一张可以动态过滤数据的可视化报表:

图片

本页内容