DataGear 制作自适应任意屏幕尺寸的数据可视化看板
DataGear 在2.12版本新增了看板可视编辑模式,并在2.13版本进行了大幅改进和增强,使系统即支持以编写HTML、JavaScript、CSS源码的方式制作看板,同时支持以交互式、直观可见、友好快捷的方式制作看板。
本文将通过看板可视编辑模式提供的网格布局和样式设置功能,介绍如何制作自适应大屏、PC、平板、手机等任意屏幕尺寸的数据可视化看板。
首先,点击看板管理页面的【添加】-【添加(新窗口)】按钮,新建一个空白看板,并切换至【可视模式】,如下图所示:
在制作看板之前,先要确定整个页面的基本网格结构,本文以三行三列的网格结构为例,点击【插入】-【外部后置插入】-【网格布局】菜单,插入网格布局,如下图所示:
- 在空白页面插入网格布局时,会有一个【填满页面】设置项,默认开启,网格布局将会填满整个页面,且自适应任意屏幕尺寸。
- 点击【更多】-【元素边线】菜单,可在页面中显示所有元素边线,便于直观查看和选取。
看板页面的第一行通常是标题行,并且高度是固定的较小尺寸,所以,这里我们先调整网格布局第一行的高度,点击选中页面中的任一网格,然后点击【选择】-【父元素】菜单项,选中网格容器元素,然后点击【编辑】-【样式】菜单项,在弹出面板中找到【尺寸】-【网格容器】,将【行划分】输入项由
repeat(3, 1fr)
修改为
3rem 1fr 1fr
- repeat(3, 1fr):网格三行平分整个高度,具体参考CSS网格布局相关概念
- 3rem 1fr 1fr:将第一行高度固定为三倍基础字体高度,第二行、第三行平分剩余的高度,具体参考CSS网格布局相关概念
效果如下图所示:
然后,将第一行的三个网格合并为一个,点击选中左上角的第一个网格,点击【编辑】-【样式】菜单项,在弹出面板中找到【尺寸】-【网格条目】,填写如下内容:
行跨度起始:1
行跨度结束:2
列跨度起始:1
列跨度结束:4
- 网格从第一条横向网格线跨至第二条横向网格线,从第一条竖向网格线跨至第四条竖向网格线,具体参考CSS网格布局相关概念
点击选中合并后的第一行网格,点击【编辑】-【文本内容】菜单项,填写“示例看板”文本内容,点击【编辑】-【样式】菜单项,在弹出面板中找到【字体】,填写如下内容:
字体尺寸:2rem
字体粗细:bold
对齐方式:center
效果如下图所示:
下面,我们将看板的中间网格调整为跨两行、且宽度较大的区域,两侧的四个网格调整宽度稍小的区域,中间可用于放置一个主要图表,两侧则用于放置四个次要图表。
点击选中页面中的任一网格,然后点击【选择】-【父元素】菜单项,选中网格容器元素,然后点击【编辑】-【样式】菜单项,在弹出面板中找到【尺寸】-【网格容器】,将【列划分】输入项由
repeat(3, 1fr)
修改为
1fr 1.5fr 1fr
- 1fr 1.5fr 1fr:第一列、第二列、第三列按照1:1.5:1的比例占据整个宽度,具体参考CSS网格布局相关概念
点击选中页面中第二行的第二个网格,点击【编辑】-【样式】菜单项,在弹出面板中找到【尺寸】-【网格条目】,填写如下内容:
行跨度起始:2
行跨度结束:4
列跨度起始:2
列跨度结束:3
- 网格从第二条横向网格线跨至第四条横向网格线,从第二条竖向网格线跨至第三条竖向网格线,具体参考CSS网格布局相关概念
效果如下图所示:
至此,看板布局已调整完成。
下面,需要做的是在页面的五个网格中插入图表,依次选中网格,点击【插入】-【内部后置插入】-【图表】,选择并插入图表,如下图所示:
然后,点击【编辑】-【全局样式】菜单项,调整看板全局配色,点击【编辑】-【全局图表主题】菜单项,调整看板全局图表主题,保存并展示,完成看板制作。
最终展示效果如下图所示:
对于任意屏幕尺寸,上述看板都能够自适应,等比例缩放元素、图表尺寸。
官网地址:http://www.datagear.tech
源码地址:
Gitee:https://gitee.com/datagear/datagear
Github:https://github.com/datageartech/datagear
大屏模板地址:https://gitee.com/datagear/DataGearDashboardTemplate
DataGear 制作自适应任意屏幕尺寸的数据可视化看板相关推荐
- DataGear 轻松制作支持图表联动的全国地图、省级地图数据可视化看板
DataGear看板的图表联动功能,使您可以轻松制作支持图表联动的全国地图.省级地图数据可视化看板. 首先,新建两个数据集. 第一个是各省指标数据集,将用于绘制全国指标图表,它的SQL语句如下所示: ...
- DataGear 制作基于Vue2、Element UI前端框架的数据可视化看板
DataGear 数据可视化看板内置了一些基本.简单的页面交互组件,当它们无法满足实际看板需求时,可以引入更流行和强大的前端框架. 本文以Vue2.Element UI前端框架为例,介绍如何制作具有更 ...
- DataGear 制作支持全国、省、市三级数据钻取效果的地图数据可视化看板
通过DataGear的参数化数据集.图表联动和看板API功能,可以很方便地制作支持数据钻取效果的数据可视化看板. 首先,以上级地区名为参数,新建一个参数化SQL数据集: SELECTCOL_NAME, ...
- 数据可视化 数据可视化看板项目一:(1)模拟实时数据 -使用MYSQL的事件建立动态模拟数据,每秒更新一次 (1)
需求: 市场人员进行数据可视化产品销售公关时,一定会遇到一个问题,就是客户要求进行展示. 但是我们不可能透露其它客户目前的真实实时更新的数据. 那么这里就要求,创建模拟的秒级别的数据. 方法: 1.使 ...
- 为任意屏幕尺寸构建 Android 界面
/ 今日科技快讯 / 北京时间2022年1月17日,我国在太原卫星发射中心用长征二号丁运载火箭,成功将试验十三号卫星发射升空,卫星顺利进入预定轨道,发射任务获得圆满成功. / 前言 / ...
- python制作股票图表怎么看_Python 数据可视化实战:使用 PyQt5 和 Echarts 打造股票数据看板...
在一篇论文中,最吸引审稿人目光的莫过于枯燥的文字间精美的图表 在一份项目路演 ppt 中,酷炫的财务报表往往是打动投资人的最后一剂强心剂 作为数据分析最后也是最直接的一环,数据可视化的重要性不言而喻 ...
- 12. Excel数据可视化看板--动态销售月报看板
文章目录 1可视化看板作用 1.1 形象直观,有利于提高效率 1.2 透明度高,便于配合和监督 1.3 降低成本,缩短生产周期 1.4 传递现场的生产信息,统一思想 1.5 杜绝现场管理中的漏洞 1. ...
- 一款开源的数据可视化分析平台,提供多种大屏模板,非常炫酷
点击关注公众号,实用技术文章及时了解 DataGear是一款开源的数据可视化分析平台,可自由制作任何您想要的数据可视化看板,支持接入SQL.CSV.Excel.HTTP接口.JSON等多种数据源.系统 ...
- 4.5k star,一款开源的数据可视化分析平台,提供多种大屏模板,非常炫酷
点击关注公众号,实用技术文章及时了解 DataGear是一款开源的数据可视化分析平台,可自由制作任何您想要的数据可视化看板,支持接入SQL.CSV.Excel.HTTP接口.JSON等多种数据源.系统 ...
- 数据图表与分析图_史上最全最实用的数据可视化分析图表制作工具汇总
俗话说的好:工欲善其事,必先利其器!一款好的工具可以让你事半功倍,尤其是在大数据时代,更需要强有力的工具通过使数据有意义的方式实现数据可视化,还有数据的可交互性;我们还需要跨学科的团队,而不是单个数据 ...
最新文章
- Python批量下载XKCD漫画只需20行命令
- 使用HTML+CSS实现鼠标划过的二级菜单栏
- 深度学习-Tensorflow2.2-tf.data输入模块{2}-tf.data基础用法-09
- 编程基本功:有了范例代码,怎么办?
- [ARC074C] RGB Sequence(dp)
- 人工智能如何有效地运用于自然语言处理
- Error: Could not find or load main class org.elasticsearch.tools.JavaVersionChecker
- vr设备应用程序_在15分钟内构建一个VR Web应用程序
- xps15u盘装linux,Dell XPS 15 9560 安装 Ubuntu 18.04
- 基于JAVA+SpringBoot+Mybatis+MYSQL的养老院管理系统
- 什么样的细节会让你觉得一个人的情商高得吓人?
- Protocol ‘https‘ not on whitelist ‘file,crypto‘ ——m3u8下载协议不在白名单,m3u8下载器推荐
- c语言第三章作业3.13,c语言谭浩强第1章至第3章测试试题
- java 私塾_Java私塾基础note
- 28张高清数据分析全知识地图,强烈建议收藏
- 可能最有效的母亲节邮件主题,你用对了吗?
- 农林资金 大数据审计案例_大数据审计应用案例
- 基于jQuery发展历程时间轴特效代码
- 手机共享笔记本wifi热点
- 解决在谷歌浏览器上倍速播放视频适用B站 慕课MOOC 百度网盘(弃用) 谷歌内置播放器最高16倍速