数据可视化分析之新技能——魔数图

数据可视化分析之新技能——魔数图

大家在使用数据可视化工具进行数据设计的时候,有没有遇到过这些设计场景:部门人员的履历细信息、工厂各个产线的生产状态和生产信息、公司各个部门的KPI信息……这些数据都有一个共同的特点:数据结构相同,但是内容各有不同;布局相同,但展示的样式相同。在传统场景中我们要实现这种需求,不能说做不到,只是实现起来比较繁琐,我们要把数据一条一条的找出来,然后重复创建多个完全相同的图表分别绑定对应的是数据。是不是听着就脑壳痛。

那么有没有快速实现的方法呢?那必须有啊!今天我们介绍的就是我们Wyn 6.0 推出的全新组件——魔数图

本文将会从:① 适用场景;②场景分析;③使用案例;三个方面介绍魔数图的使用方法。感兴趣的小伙伴搬好小板凳。文末还有数据可视化大屏模板素材,免费发放,千万不要错过啊!

一、适用场景

魔数图适用于所有的结构相同、重复显示且布局相同的数据。能够快速、清晰的展示数据。

二、场景分析

魔数图可用的场景有很多,我们列举几个常见的使用场景:

2.1展示仓库的指标数据。

这是在是由化工行业中的应用,展示各个仓库的状态数据,如温度、湿度以及对应的上限和下限指标。

2.2销售人员业绩展示。

展示销售人员的业绩完成情况,照片和每个月的销售额。这也是一个典型的应用场景,每个销售人员展示的信息完全相同,并且在展示时增加了一些图表图片,丰富了数据的展示形式;

2.3工厂订单工序追踪。

每个订单具有不同的生产工序,每道工序都有自己的详细信息。根据订单信息关联对应的而工序信息,

三、使用案例

在设计之前,我们需要先确定我们的使用场景是否适合我们的魔术卡,使用魔术卡。然后确定我们要展示的数据,并进行布局设计。我们以上面的工厂订单工序追踪为例,介绍魔数图的使用设计全过程(不包括最后的背景样式调整)。

3.1 创建数据源

3.1.1 数据结构设计

我们以Excel表格模拟生产时的数据源,分为存储订单信息的“订单列表”和存储工序信息的“生产列表”两部分:

3.1.2. 创建数据源

将Excel表格数据引入wyn(如下图),然后全部都“下一步”,最后一步点“创建”;即可完成数据源的创建

3.1.3 查看数据源

我们创建成功之后,可以在数据源列表中看到数据源:

点进去就可以预览我们的数据

3.2 创建数据集

在3.1中完成数据源的创建之后,我们就可以开始创建数据集了

  1. 通过订单编号关联表:

击预览数据(预览正常然后保存数据)

3.3 创建图表

前两步都是在准备数据,当数据准备好之后,就可以开始使用我们的魔数卡组件啦。

3.3.1 创建魔数图

在“图表”中找到“魔数卡”组件,直接拖到绘图区域即可:

3.3.2 绑定数据集

魔数卡的数据集,我们可以在仪表板设计器页面绑定:

也可以在魔术卡的设计器面板绑定:

两者没有区别根据我们的习惯操作就行。

3.3.3 魔术卡设计
3.3.3.1 富文本

我们在图表中添加一个“富文本”组件,然后在“插入表达式中”进行下图中的设计:选中我们要展示的字段,然后选择运算方式为“第一个值”(我们这里只做数据的展示,不做其他的任何运算)。然后重复这个操作将我们要展示的数据全部添加上:

在做一点点的样式调整,内容居中显示并且加一点背景色:

保存模板之后,返回仪表板进行预览,效果如下,将我们的模拟数据全部展示了出来:

3.3.3.2 指示器

完成订单数据设计之后,我们按照工序名称,来显示该工序的进度:

为了统一样式我们在为治时期设置一下图表样式:

再做一些属性设置:隐藏标题和副标题

最后的展示效果就成了这样:

3.3.3.3 图片
3.3.3.3.1 发布图片

这一部分,我们要先准备我们的图片资源,我们模拟的数据中的图片是我们通过wyn发布出来的。在wyn的安装目录下找到 ” \Server\wwwroot\” 并创建 “\3d\sc“目录,然后把我们的图片解压后放进去如下图(也可以使用自己发布的图片,支要可以访问即可)。

下载地址:

https://gcdn.grapecity.com.cn...

然后重启我们的Wyn就能通过网络访问图片了

3.3.3.3.2 添加组件

添加图片组件,并未组件绑定数据:

然后把标识订单状态的图片数据绑定上去:

最后把两张图片的文字说明,通过富文本展示出来,展示方式和3.3.3.1 中的方式相同:

3.3.4 效果预览

至此,我们的魔术卡的设计就完成了,完整的预览效果如下:

有些小伙伴预览的效果可能不是这样,而是下面这样:

遇到这个不要慌,怎吗解决呢,只要简单的设置一下我们的条目布局就好啦:

然后,就可以美美的预览啦:

数据可视化大屏模板获取:

https://gcdn.grapecity.com.cn...

素材获取关键字:大屏模板

四、拓展阅读

详解商业智能“前世今生”,“嵌入式BI”到底是如何产生的?

使用WIX进行商业智能OEM打包

数据可视化分析工具如何在国内弯道超车迅速崛起百花齐放?


葡萄城技术团队
葡萄城技术团队,分享技术文章。

葡萄城创建于1980年,是全球领先的软件开发技术和低代码平台提供商。以“赋能开发者”为使命,葡萄城致力...

2.5k 声望
20.4k 粉丝
0 条评论
推荐阅读
【文末领取】精算与金融建模行业解决方案白皮书,不要错过!
精算学是对人类社会所面临的各种风险及其他客观事务进行量化分析和处理的一门科学。在保险、金融、投资和各类风险管理等许多领域得到广泛应用,尤其在保险和社会保障领域,已成为不可或缺的科学和技术。以保险公...

葡萄城技术团队阅读 111

封面图
Vue + SpreadJS 实现高性能数据展示与分析
在前端开发领域,表格一直都是一个高频使用的组件,尤其是在中后台和数据分析场景下。但当一屏展示数据超过1000条数据记录时,会出现浏览器卡顿等问题,严重影响客户体验。为解决这些性能问题,不少组件也提出了...

葡萄城技术团队阅读 3.4k

数据赋能的未来,看向嵌入式BI
数据分析能力越来越成为消费者和企业的必备品应用程序,复杂程度各不相同,从简单地一个网页或门户上托管一个可视化或仪表板,到在一个云服务上实现数据探索、建模、报告和可视化创建的应用程序。BI的实现方式越...

葡萄城技术团队阅读 3.4k

微服务拆分治理最佳实践
部门中维护了一个老系统,功能都耦合在一个单体应用中(300+接口),表也放在同一个库中(200+表),导致系统存在很多风险和缺陷。经常出现问题:如数据库的单点、性能问题,应用的扩展受限,复杂性高等问题。

京东云开发者2阅读 356

封面图
poetry 下运行 dbt(qbit)
dbt 是 Data Build Tool 的简称,目前由 dbt labs 公司负责开发和维护,公司的前身是Fishtown Analytics。

qbit阅读 1.1k

VOP 消息仓库演进之路|如何设计一个亿级企业消息平台
VOP作为京东企业业务对外的API对接采购供应链解决方案平台,一直致力于从企业采购数字化领域出发,发挥京东数智化供应链能力,通过产业链上下游耦合与链接,有效助力企业客户的成本优化与资产效能提升。本文将介...

京东云开发者2阅读 195

封面图
DataGear 制作Excel动态数据可视化图表
DataGear 4.1.0 版本增强了Excel数据集功能,新增了【工作表名称】项,并且支持填写参数化语法内容,使得可基于Excel多工作表,构建动态数据可视化图表。

用户bPc0kOH阅读 758

封面图

葡萄城创建于1980年,是全球领先的软件开发技术和低代码平台提供商。以“赋能开发者”为使命,葡萄城致力...

2.5k 声望
20.4k 粉丝
宣传栏