likes
comments
collection
share

DataGear 制作自适应任意屏幕尺寸的数据可视化看板

作者站长头像
站长
· 阅读数 23

DataGear 即支持以编写HTML、JavaScript、CSS的源码模式制作看板,也支持以直观可见、友好快捷的可视模式制作看板。

本文将通过看板可视编辑模式提供的网格布局和样式设置功能,介绍如何制作自适应大屏、PC、平板、手机等任意屏幕尺寸的数据可视化看板。

首先,点击看板管理页面的【添加】-【添加(新窗口)】按钮,新建一个空白看板,并切换至【可视模式】,如下图所示:

DataGear 制作自适应任意屏幕尺寸的数据可视化看板

在制作看板之前,先要确定整个页面的基本网格结构,本文以三行三列的网格结构为例,点击【插入】-【外部后置插入】-【网格布局】菜单,插入网格布局,如下图所示:

DataGear 制作自适应任意屏幕尺寸的数据可视化看板

  • 在空白页面插入网格布局时,会有一个【填满页面】设置项,默认开启,网格布局将会填满整个页面,且自适应任意屏幕尺寸。
  • 点击【更多】-【元素边线】菜单,可在页面中显示所有元素边线,便于直观查看和选取。

看板页面的第一行通常是标题行,并且高度是固定的较小尺寸,所以,这里我们先调整网格布局第一行的高度,点击选中页面中的任一网格,然后点击【选择】-【父元素】菜单项,选中网格容器元素,然后点击【编辑】-【样式】菜单项,在弹出面板中找到【尺寸】-【网格容器】,将【行划分】输入项由

repeat(3, 1fr)

修改为

3rem 1fr 1fr
  • repeat(3, 1fr):网格三行平分整个高度,具体参考CSS网格布局相关概念
  • 3rem 1fr 1fr:将第一行高度固定为三倍基础字体高度,第二行、第三行平分剩余的高度,具体参考CSS网格布局相关概念

效果如下图所示:

DataGear 制作自适应任意屏幕尺寸的数据可视化看板

然后,将第一行的三个网格合并为一个,点击选中左上角的第一个网格,点击【编辑】-【样式】菜单项,在弹出面板中找到【尺寸】-【网格条目】,填写如下内容:

行跨度起始:1
行跨度结束:2
列跨度起始:1
列跨度结束:4
  • 网格从第一条横向网格线跨至第二条横向网格线,从第一条竖向网格线跨至第四条竖向网格线,具体参考CSS网格布局相关概念

点击选中合并后的第一行网格,点击【编辑】-【文本内容】菜单项,填写“示例看板”文本内容,点击【编辑】-【样式】菜单项,在弹出面板中找到【字体】,填写如下内容:

字体尺寸:2rem
字体粗细:bold
对齐方式:center

效果如下图所示:

DataGear 制作自适应任意屏幕尺寸的数据可视化看板

下面,我们将看板的中间网格调整为跨两行、且宽度较大的区域,两侧的四个网格调整宽度稍小的区域,中间可用于放置一个主要图表,两侧则用于放置四个次要图表。

点击选中页面中的任一网格,然后点击【选择】-【父元素】菜单项,选中网格容器元素,然后点击【编辑】-【样式】菜单项,在弹出面板中找到【尺寸】-【网格容器】,将【列划分】输入项由

repeat(3, 1fr)

修改为

1fr 1.5fr 1fr
  • 1fr 1.5fr 1fr:第一列、第二列、第三列按照1:1.5:1的比例占据整个宽度,具体参考CSS网格布局相关概念

点击选中页面中第二行的第二个网格,点击【编辑】-【样式】菜单项,在弹出面板中找到【尺寸】-【网格条目】,填写如下内容:

行跨度起始:2
行跨度结束:4
列跨度起始:2
列跨度结束:3
  • 网格从第二条横向网格线跨至第四条横向网格线,从第二条竖向网格线跨至第三条竖向网格线,具体参考CSS网格布局相关概念

效果如下图所示:

DataGear 制作自适应任意屏幕尺寸的数据可视化看板

至此,看板布局已调整完成。

下面,需要做的是在页面的五个网格中插入图表,依次选中网格,点击【插入】-【内部后置插入】-【图表】,选择并插入图表,如下图所示:

DataGear 制作自适应任意屏幕尺寸的数据可视化看板

然后,点击【编辑】-【全局样式】菜单项,调整看板全局配色,点击【编辑】-【全局图表主题】菜单项,调整看板全局图表主题,保存并展示,完成看板制作。

最终展示效果如下图所示:

DataGear 制作自适应任意屏幕尺寸的数据可视化看板

对于任意屏幕尺寸,上述看板都能够自适应,等比例缩放元素、图表尺寸。

官网地址:http://datagear.tech

源码地址:

Gitee:https://gitee.com/datagear/datagear

Github:https://github.com/datageartech/datagear