大屏制作入门

更新时间:2021-07-15

新建大屏

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

图片

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

图片

在弹窗中,您可以选择基于我们提供的模板进行创建,这样可以大大减少您开发大屏的成本,并且我们的模板会持续更新以满足多种不同的使用场景。

当然您也可以不基于任何模板来创建一个空的大屏页面。

图片

图片

新建的大屏页面会直接进入编辑页面中,如果退出编辑后可以点击右上角的编辑按钮可以再次进入编辑模式,进入页面后我们可以看到基于模板新建好的大屏,点击右上角的编辑按钮即可以进入编辑模式:

图片

大屏中图表的拖拽式操作

进入大屏编辑页面后,您可以对图表进行拖拽式操作,改变图表的大小和位置,新建或更改文字、图片等,如下:

图片

更多关于大屏的编辑操作详见大屏编辑概览

绑定图表的数据

最重要的就是绑定图表的数据,此处以右下角的折线图为例,单击折线图表来选中,如下图来使用 SQL 方式绑定图表数据:

图片

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

图片

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

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

接下来在折线图的控制面板中,将 X 轴和 Y 轴与对应的数据字段进行绑定,并单击「刷新图表」即可看到折线图的数据进行了更新,展示了 SQL 查询到的数据:

图片

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

图片

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

在调试中我们可以看到:

  • 您输入的原始 SQL 语句
  • 最终生成的在数据库中查询的 SQL 语句
  • SQL 查询的原始结果
  • Sugar BI进行转化操作后的中间结果
  • 格式化为图表可以读取的数据 JSON 格式结果

图表数据的实时刷新

大屏中的图表支持数据自动刷新,您可以控制数据自动刷新是否开启以及自动刷新的时间间隔,从而让大屏中的数据能够和您的数据库中数据进行实时的同步:

图片

公开分享

您编辑完大屏后,可以将大屏页面进行公开分享,这样其他的用户就能访问到您的大屏页面,你也可以将公开的大屏页面投放到大屏幕上进行实时的展示。具体的操作详见公开发布分享

本页内容