功能概述

当我们创建一个数据仪表板时，有时需要重复显示一些数据，并具有相同的布局。

例如，显示每条生产线的生产数据，如温度、湿度、用量、剩余用量、工作时间，甚至是员工的KPI等等。

为了更快、更清晰地显示这些类似的数据，并自由地设计布局，Wyn 特别推出了一个全新组件—魔数图。

魔数图根据用户自定义的模板为基础，结合所绑定的数据，循环生产最终的图表结果。

效果图

可以看到魔数图以相同的布局循环显示各订单的详情和数据。

每笔订单内部都显示了非常丰富的信息，例如：

1. 订单的生产进度，各工序的完成情况。

2. 订单基本信息，包括：销售单号、生产单号、客户名称、产品编码、产品名称、产品规格、实际计划、计划结束日期等。

3. 订单生产进度（正在生产、暂停、未开始等），完成情况与计划相比的状态（延误、临期、正常等）。

4. 每个工序完成进度，每笔订单所需要的生产工序可能不同，需要动态加载每笔订单对应的工序和进度。

接下来我们就通过这个示例演示完整实现过程。

使用魔数图

示例数据：

生产跟踪.xlsx

1. 准备和理解数据

数据包括【订单列表】和【生产列表】两部分，分别代表销售订单概要信息和该订单对应的所有生产工序进度情况：

2. 创建数据源和缓存数据集

创建数据源将数据接入系统，然后创建缓存数据集，并使用内连接将两个数据表连接起来。

3. 创建仪表板添加魔数图

4. 为魔数图绑定分类字段

分类字段就是魔数图循环的根据，工单是以编号作为分类条件，也就是说每笔工单对应生产看板上的一条记录，一条记录也就是一个循环。

5. 设计魔数图循环模板

循环模板是每条记录中要显示的详细元素，如下图所示。我们设计出这样的模板以后，魔数图会根据上一步中绑定的分类字段进行循环展开。

点击编辑模板按钮进入模板设计器。

模板主要包括以下几个区域，对应的实现方法介绍如下：

关键步骤解析：

1） 标题区域制作过程

以订单编号为例介绍标题区域制作过程：

添加富文本组件，并插入表达式。

如下设置：

即可显示出订单编号。

再进行一些样式的调整即可。

复制粘贴之后，将绑定字段修改为需要的字段，最终效果为：

2）生产状态/工单进度图制作过程

图片资源：pic.zip

为了和数据表的中URL地址一致，需要将用到的图片放到如下目录中（自行创建3d\sc目录）：

C:\Program Files\Wyn\Server\wwwroot\3d\sc

添加图片组件，并绑定数据。

添加富文本组件，并插入表达式。

绑定状态1的名称。

调整大小和边框显示后效果。

同理，制作工单进度图，使用状态2图片和状态2名称。

3）工序进度制作过程

添加一个指示器，绑定工序进度，并在列切面上绑定工序名称。

设置对比值，并开启区间范围显示颜色。

接下来再调整一些外观样式，如关闭标题、副标题、百分比标签。

将切面边框色调至透明。

将绑定的数据显示为百分比格式。

此时效果如下：

最终在魔数图模板设计器中设计效果如下：

6. 调整魔数图布局

保存模板并返回仪表板设计器。

整体调整魔数图的显示布局以及样式。详见条目布局和条目(选中/悬浮)样式。

7. 预览并完成

调整后预览达到预期效果后保存仪表板。

示例的工程包如下，您可以在后台管理中导入使用（另外请记得将关键步骤解析第（2）步中的图片资源放至指定位置，否则部分图片加载不出来）。

魔数图示例.zip

数据绑定

魔数图存在两种数据绑定：

• 魔数图的数据绑定

• 模板中各组件的数据绑定

这里我们来进行一下区分和介绍。

魔数图数据绑定

为整个魔数图绑定数据，此时只能绑定分类、数值和提示标签。

未进入模板设计器时，选中组件即可为其绑定数据。

这里绑定的分类字段是魔数图循环的根据；而数值是为魔数图添加条件格式化的数据，仅在条件格式化中起效；提示标签与其他组件相同，用来显示鼠标提示。

进入模板设计器中后，在空白处单击后不选中任何组件，也可以为魔数图绑定数据。

组件数据绑定

进入模板设计器后，可以添加各种各样的组件，此时选中组件即可为单个组件绑定数据。不同的组件能绑定的数据也不同。

条件格式化

魔数图可以对绑定到整个魔数图（而非内部组件）上的数据进行条件格式化，包含分类和数值中绑定的字段。

例如，现在有一个魔数图分析了各大区的销售情况。整个魔数图以客户地区为循环依据，并且在数值中绑定了订单金额。

此时为魔数图添加条件格式化。

可见应用于选项中可以选择魔数图数值绑定区的字段。此时我们就可以根据订单金额添加条件格式化。

最终条件格式化的效果如下：

数据交互

魔数图以整个条目可以进行数据交互，而条目内部的具体组件仍然可以设置和使用数据交互。

而这个属性就是用来设置魔数图进行数据交互时的模式，是以条目为单位或以条目中的组件为单位进行交互。

选择条目时，魔数图以条目为单位进行数据交互。此时在条目上设置的数据交互行为生效。

选择条目-图表时，则以具体组件为单位进行数据交互。此时内部组件上的数据交互行为生效。

比如我们设置了交互模式为条目，来看鼠标提示。当鼠标悬浮至条目中任何一个位置时，都将显示一样的提示，也就是整个条目的鼠标提示内容。

比如我们设置了交互模式为条目-图表，来看鼠标提示。当鼠标悬浮至组件外的条目区域时，并不会显示提示。仅当鼠标悬浮至组件上时才会显示组件的提示。

动态显示分类

我们知道在魔术图模板中使用富文本组件的表达式功能绑定一个分类字段，然后设置显示第一个值，可将分类内容显示出来。

但以条目为数据交互单位，钻取到省份时，富文本中依然显示大区，因为这里绑定了销售大区字段，无法动态显示当前当前分类内容。

此时我们可以使用变量 CardCategoryValue 来显示动态分类。具体实现如下：

此时保存模板，返回仪表板并预览。此时使用两种方法都可以将大区显示出来。

选中整个条目进行钻取。

此时可见差别。之前使用表达式绑定字段方法的富文本依然显示大区，而使用变量的富文本则显示为了当下的分类内容。

另外，还可以使用形如 CardCategoryValue|formatter 为变量设定格式；具体可参考变量格式化中的相关内容。

使用 CardCategoryValue["columnName"]|formatter 指定显示固定字段并进行格式化。