数据可视化分析之新技能——魔数图
source link: https://www.cnblogs.com/powertoolsteam/p/16873567.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
数据可视化分析之新技能——魔数图
大家在使用数据可视化工具进行数据设计的时候，有没有遇到过这些设计场景：部门人员的履历细信息、工厂各个产线的生产状态和生产信息、公司各个部门的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中完成数据源的创建之后，我们就可以开始创建数据集了
- 通过订单编号关联表：
击预览数据（预览正常然后保存数据）
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“目录，然后把我们的图片解压后放进去如下图（也可以使用自己发布的图片，支要可以访问即可）。
下载地址：
然后重启我们的Wyn就能通过网络访问图片了
3.3.3.3.2 添加组件
添加图片组件，并未组件绑定数据：
然后把标识订单状态的图片数据绑定上去：
最后把两张图片的文字说明，通过富文本展示出来，展示方式和3.3.3.1 中的方式相同：
3.3.4 效果预览
至此，我们的魔术卡的设计就完成了，完整的预览效果如下：
有些小伙伴预览的效果可能不是这样，而是下面这样：
遇到这个不要慌，怎吗解决呢，只要简单的设置一下我们的条目布局就好啦：
然后，就可以美美的预览啦：
数据可视化大屏模板获取：
https://gcdn.grapecity.com.cn/forum.php?mod=viewthread&tid=157030&extra=page%3D1
素材获取关键字：大屏模板
四、拓展阅读
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK