所有文档

          百度数据可视化 Sugar

          报表制作入门

          新建报表

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

          图片

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

          图片

          新建好后,点击报表后的眼睛图标进入新建的空报表页面:

          图片

          添加图表并绑定 SQL 模型

          新建的空报表页面中没有内容,点击右上角的编辑按钮可以进入编辑模式:

          图片

          在顶部栏中选择折线图:

          图片

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

          图片

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

          图片

          • 首先填写模型的名称,并选择之前在准备工作中已经创建好的数据源
          • 然后编写查询数据的 SQL 语句
          • 最后将需要的字段添加到模型中,并设置好相应的数据类型

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

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

          图片

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

          图片

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

          在调试中我们可以看到:

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

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

          图片

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

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

          添加过滤条件

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

          图片

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

          图片

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

          将过滤条件与图表关联

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

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

          图片

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

          图片

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

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

          图片

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

          图片

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

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

          图片

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

          图片

          上一篇
          概述和创建数据源
          下一篇
          大屏制作入门