快速入门

什么是Sugar

Sugar是百度推出的数据可视化服务平台,目标是解决报表和大屏数据的可视化展现问题,解放数据可视化系统的开发人力。Sugar提供界面优美、体验良好的交互设计,可实现零开发5分钟搭建数据可视化页面,并可通过进一步完善逐步打造为功能强大的数据BI分析系统。平台支持直连多种数据源(MySQL、SQL Server、PostgreSQL、GreenPlum、Baidu Palo等),还可以通过API方式绑定可视化图表的数据,简单灵活。大屏与报表的图表数据源可以复用,用户可以方便的为一套数据搭建不同的展示形式。

登录

Sugar使用企业邮箱作为用户的唯一标识。用户输入所在公司或组织的企业邮箱账号,点击『发送验证码』,即可收到一封来自Sugar的邮件。然后,输入邮件中收到的验证码后即可进入所在公司的空间广场。

图片

空间广场

「空间广场」 是管理空间的地方,其中包含多个空间。每个公司对应唯一一个空间广场,空间广场的划分与公司的企业级邮箱域名相关,拥有相同企业邮箱后缀的用户会进入同一个空间广场。

每个公司至少有一个管理员,管理员可以对空间广场进行配置和管理。第一个进入自己公司的空间广场的用户会自动成为公司的管理员,公司管理员可以进行一些设置(例如修改公司的名称等),详见「公司管理」

图片

空间广场会分为 「我的空间」「公开空间」「其他空间」 三部分。

  • 「我的空间」 用户是该空间的成员
  • 「公开空间」 用户可以查看,但不是该空间的成员
  • 「其他空间」 用户无权访问的空间,用户可以通过联系空间的管理员来申请访问权限

空间

「空间」 是Sugar中最重要和基础的概念,一个空间其实就是一个子系统,在这个子系统中,用户可以随意添加大屏和报表,定义和报表的目录结构以及权限机制,并且只有该空间的组员才能访问该空间的报表页面和大屏页面,而对其他非该空间的用户不可见。多个空间之间是完全隔离的:数据隔离、用户隔离、权限隔离。当然,每个空间种可以有多个用户,每个用户也可以属于多个空间!

用户可以在空间广场中创建自己的空间。当然,公司的管理员可以控制不让普通用户创建新的空间(详见「公司管理」)。

图片

普通空间

默认情况下创建的是普通空间,不在该空间用户列表中的用户,是无法查看该空间任何页面的,也无法知道本空间中包含哪些报表和大屏。空间管理员可以搜索并添加属于本公司的用户并通过「角色与用户」来进行权限管理。

公开空间

公开空间意味着本公司所有用户都可以进入到空间,并可以看到本空间内包含的全部报表和大屏。但只有空间管理员可以对报表和大屏进行管理和编辑。

Demo空间

Demo空间是供用户测试使用的,本公司下所有用户可以新建、查看和编辑所有报表和大屏。公司管理员可以在这类空间中提供一些报表配置的示例供其他用户参考。

用户种类

在上面的描述中,大量提到了公司管理员、空间管理员等概念,在Sugar中我们将用户分成3种,详见「三种用户」

浏览报表

从空间广场中,点击具体的空间即可进入到该空间中,进入之后,左侧的导航会罗列出空间中的所有报表目录,根据导航即可浏览报表页面,示例如下:

图片

用户可以通过与各图表的交互来查看和分析报表展示的数据。

一个简单的报表编辑示例

现在我们从零开始搭建一个报表页面。

新建报表

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

图片

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

图片

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

图片

添加数据源

在编辑报表页面之前,我们需要连接到您需要展示的数据库,在左侧的管理中心中进入「数据源管理」,点击添加数据源:

图片

在这里选择并配置你的数据库信息,在填好后,可以点击测试连接进行测试,如果成功了,就可以保存这个数据源了:

图片

添加图表并绑定SQL模型

回到刚才的新建的空报表页面,目前这个报表里没有内容,点击右上角的编辑按钮可以进入编辑模式:

图片

在顶部栏中选择折线图:

图片

选中折线图来打开折线图的控制面板,在数据选项卡中,选用SQL建模的方式来绑定图表数据:

图片

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

图片

  • 首先填写模型的名称,并选择刚才添加的数据源
  • 然后编写查询数据的SQL语句
  • 最后将需要的字段添加到模型中,并设置好相应的数据类型

绑定数据源的详细配置请参考「SQL方式绑定数据源」。

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

图片

点击调试:

图片

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

在调试中我们可以看到:

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

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

图片

图表的详细配置请参考「图表通用配置」。

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

添加过滤条件

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

图片

在其基础控制面板中自定义一个「查询key值」:

图片

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

将过滤条件与图表关联

接下来我们将这个过滤条件嵌入到折线图图表的SQL模型中。

打开折线图的控制面板,编辑刚才新建的SQL模型:

图片

在SQL语句中嵌入刚刚添加的日期范围查询条件:

图片

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

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

图片

点击折线图表控制面板中的调试:

图片

可以看到,伪SQL语句中的自定义语法在真正执行的SQL中被替换为了您填写的过滤条件。

查询的结果也符合过滤条件的要求。

此时,可以随意改变过滤条件中的值,并点击过滤条件下的查询按钮,得到想要查看的结果:

图片

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

图片

浏览大屏

在空间左侧导航顶部会罗列出空间中的所有大屏,根据导航即可浏览大屏页面,示例如下:

图片

用户可以通过与各图表的交互来查看和分析报表展示的数据。

右上角的工具栏中的小图标的功能依次为:

一个简单的大屏编辑示例

现在我们从零开始搭建一个大屏。

新建大屏

首先从空间广场中选择一个空间(您必须是该空间的管理员)或者是Demo类型的空间:

图片

在左侧的管理中心选择「大屏管理」,点击添加新的大屏来创建您的第一个大屏:

图片

在弹窗中,您可以选择基于我们提供的模版进行创建,这样可以大大减少您开发大屏的成本。我们的模版会持续更新。

当然您也可以不基于模版创建一个空的大屏项目。

图片

新建好后,可以在大屏列表中看到我们刚刚新建的大屏,点击右侧的眼睛图标进入大屏浏览页面:

图片

在这里我们可以看到基于模版新建好的大屏,点击右上角的编辑可以进入编辑模式:

图片

编辑大屏

大屏编辑的界面与报表的类似,分为以下几个区域:

  1. 顶部工具栏:在这里您可以添加新的图表,并对大屏进行保存等操作。
  2. 左侧图层管理:在这里可以通过拖拽的方式改变图表的图层顺序,从而控制图表相互的覆盖顺序,列表中最靠上的图表在大屏中处于最顶层。图层管理可以默认收起或调整宽度。
  3. 右侧控制面板:在没有选中图表的时候,这里可以对大屏本身的配置进行调整;选中某个图表的时候,这里可以对这个人图表的位置,大小,样式,数据等进行配置。控制面板可以默认收起或调整宽度。
  4. 底部工具栏:这里可以调整大屏编辑时的缩放百分比,方便您进行放大来查看和调整细节部分。
  5. 中心大屏部分:中心部分是您编辑的大屏的主体,在这里您可以通过拖拽的方式调整图表的位置,大小,并进行图表的复制和删除等操作。

图片

编辑图表

您可以对模版中的图表进行新增,删除,复制和修改配置等操作来制作您自己的大屏。

此处以右下角的折线图为例,点击折线图表来选中,选中后的编辑界面如下:

图片

在左侧的图层管理中可以看到,与图表相对应的列表项被同步选中了,您可以对它进行拖拽,来调整折线图与其他图表的叠放次序。

图表被选中后会被一个蓝色的编辑框包裹,左上角可以对图表进行复制和删除操作。

拖动位于编辑框右边,底边,右下角的蓝色标识可以对图表的大小进行调整。拖动整个图表可以改变其位置。当然如果您可以通过右边的控制面板对大小和位置进行像素级别的调整。

图表的详细配置请参考「图表通用配置」。

为图表绑定数据

大屏中图表的数据绑定,包括「API数据格式」,「数据源」,以及「SQL模型」与报表中的完全一致,并且是可以复用的。这使得您可以很方便的为已有的报表增加大屏的展示方式。

我们选择控制面板中的第二个选项卡来对图表的数据进行配置:

图片

可以看到现在图表是通过API方式拉取数据的,目前绑定的API是平台的Demo API。

如果您要绑定自己的API来拉取数据,请参考「各类图表的API返回格式

如果您要使用SQL方式绑定数据,需要先创建「数据源」,以及「SQL模型」。这里直接复用上文中报表的数据源和SQL模型,如果您还没有创建,「请参考上文」。

选择「SQL建模」方式绑定数据源,选择Demo模型,绑定好X轴和Y轴对应的数据字段,然后刷新图表就可以看到您数据的可视化结果了:

图片

绑定数据源的详细配置请参考「SQL方式绑定数据源」。

图表数据的自动刷新

大屏中的图表支持数据自动刷新,您可以控制数据自动刷新是否开启以及自动刷新的时间间隔:

图片

发布大屏

编辑完您的大屏后,您可以在大屏管理页面中将您的大屏「对外发布」:

图片

图片

发布后会生成一个带Token的分享链接,您可以把这个链接发送给需要共享的人:

图片

如果您想取消发布,再次打开这个对话框并点击停止分享。则之前的分享链接随即失效,再次发布时会生成新的分享链接:

图片

本页内容