图表

排序

此时我们发现上述柱状图月份乱序显示，实际场景中我们需要按照月份进行排序。 配置如下：进入数据源，点击数据处理与转换模块的【编辑】按钮，弹出弹窗，排序方式选择“按指定列排序”，维度选择Period，【确定】，保存元素，此时图表轴就会按照Period维度成员的顺序进行排列。

分组/堆叠

我们还想看每个月的数据由哪些科目成员组成，此时可以通过颜色进行区分。 配置如下：图表属性配置界面，颜色选择Account，设置成“堆叠”展示，还可选择不同颜色模板。

若要对同月份的不同科目成员的数据进行对比，可将颜色字段设置为“分组”展示

业务场景

通过选择不同的年份、组织、场景实现人力成本实际数与预测数对比的动态查询。

搭建思路

根据业务场景，我们希望使用的时候能够根据用户选择的条件（筛选器）或输入的值动态查询图表，那么不管是选择的一个选项还是输入的内容就需要作为参数传给财务模型，但因为是动态的无法在财务模型数据源中写死一个固定的值，因此我们需要通过表达式的方式动态的获取用户选择的值，而用户选择的值在UX中一般可以理解为就是控件的value，所以就变成了我们需要通过表达式让传参来源是作为条件控件的value。

配置步骤

1、在控件栏的自定义组件中拖入4个“维度选择器”到画布中，分别关联Year、Scenario、Org维度，并配置好可选范围、默认值。

2、在数据源的查询配置中直接引用动态的控件值，其中deep_dimension_VXzz为Year的维度选择器编码

也可以通过表达式配置$components.object_select_NY4A.value的形式，其中object_select_NY4A为Org维度选择器编码

表达式相关说明：

以year{$components.deep_dimension_VXzz.value}为例，其中：

• $components.deep_dimension_VXzz.value 是获取维度成员值的逻辑，是一个js表达式，用于获取维度选择器控件的值，通过该表达式可以动态获取到用户输入的值，具体解释可参考此文档。DeepUX操作手册

3、拖拽图表控件至画布中，选择配置好的财务模型数据源作图，此图表即可根据筛选器切换动态查询。

业务场景

预算编制场景下，所有用户对当前年份统一进行预算编制，并对当前年份的预算结构总量进行分析，不同部门用户可针对各自部门进行相关数据查看。

搭建思路

根据上述业务场景，我们得知需要配置变量元素，设置一个Year全局变量，一个Entity用户变量，预算结构总量分析的ux界面可将维度选择器的默认值设置为变量值。

配置步骤

1、配置变量元素：添加全局变量Year，值设置为2023年；添加用户变量Entity，默认值设置为EGroup-临港集团，自定义值设置为用户所在部门，如EC01-集团总部。

2、ux界面变量tab中选择变量元素，添加需要用到的页面变量Year,Entity

3、维度选择器Year默认值可配置维度表达式UX变量Year，维度选择器Entity默认值可选择维度表达式ux变量Entity

使用效果如下：

注：此处变量值字段类型仅支持维度。

场景一：通过在财务模型数据源中配置点击事件表达式

场景二：通过控件值修改，将点击事件获取到的值赋值给目标控件

场景一：复杂表达式拼接

"AndFilter(Base(GLBMYSTB, 0), Attr(ud1, " + `"${$components.input_GH8U.value}"` + "))"

场景二：多成员拼接

人力成本对比的场景取两个筛选器的值：基线场景、对比场景，财务模型数据源查询配置可将两个控件的值做拼接处理（中间用+拼接），两个成员中间用分号隔开，目的是与直接选择多个维度成员时传参格式保持一致，$components.comp_sce.value + ";" + $components.base_sce.value

场景三：筛选器多选联动

场景一：按月对人力成本的预测和实际数进行对比分析

1、财务模型数据源查询配置中，将period、scenario分配到行列上

2、数据处理与转换将scenario列成员Actual-实际数、Forecast-预测数透视出来

3、图表类型选择组合图（柱状图+散点图）时，period做轴，柱状图中值为Actual实际数，形状为实心；散点图中值为Forecast预测数，形状为竖线。通过柱子和竖线更加直观清晰的体现实际数是否达到预测目标。

图表类型选择组合图（柱状图+柱状图）时，period做轴，柱状图1中值为Actual实际数，形状为实心；柱状图2中值为Forecast预测数，形状为空心。通过实心和空心柱子更加直观清晰的体现实际数是否达到预测目标。 注意：组合图受图形顺序控制，顺序错误会造成图形遮挡覆盖等现象。

场景二：按月对损益及现金流趋势进行预实对比分析

1、财务模型数据源查询配置中，将period、scenario分配到行列上

2、图表配置时，图表类型选择组合图，添加多个折线图（折线图能更好体现变化趋势），共享轴为period，多个折线图的值均为scenario的成员，值均设置为主轴，可单独配置对应折线图的形状（样式：直线、平滑；线型：实线、虚线；数据点：实心、空心、无）

最终效果：

取数范围

通过取数范围的配置可以调用财务模型的取数接口拿到相应的数据，支持UI与脚本模式

• 所谓脚本模式即调取财务模型取数接口时需传给财务模型的一段特定格式的脚本，财务模型通过解析该脚本中的维度筛选出数据返回给UX；

• 可配置固定值或表达式；

数据处理与转换

• 可以在此处配置按维度成员进行排序；

• 透视列：财务模型原生取到的为含data列的格式，通常需要进行透视处理。选择要透视的列以及需要用到的成员，会进行行转列的透视操作，便于后续的作图；

• 维度显示格式：可配置显示名称/描述；

• 合并字段：通常用于展示有效组合，将对值与描述均以”-“拼接。

结构

• 在结构中会显示财务模型传参的数据结构，包括行列维度、财务模型存数的字段data；

其他配置

• 参数变化时自动执行：勾选后系统会实时监听脚本模式中参数的变化，然后自动查询无需额外配置查数动作，建议勾选；例如，配置筛选器动态查询图表时，若勾选参数变化时自动执行，切换筛选器时，图表会自动查询切换后的数据；若不勾选，切换筛选器，图表不会根据切换后的数据进行查询展示。

• 任一参数为空值时不执行：勾选后，查询数据源数据时只要有一个参数为空（null/undefined/空字符），则不调用查数接口。解决接口入参必填时，多个参数从无到有变化，导致调用多次，并且出现接口抛错，建议勾选。

图表类型

• 初始默认柱形图，可选择饼图、瀑布图、散点图等其他类型图表；

• 对于柱形图，轴选择需要分析的维度，有几个成员就会生成几根柱子，值选择data数据，选择完后即可渲染出图表；

基本配置

• 坐标轴转置： 勾选后轴会显示在Y轴上，值显示在X轴上；

• 工具提示： 悬停到图表上时显示的tooltips，可配置维度成员或data；

• 数据标签： 用于显示或标记数据值；

位置优化配置包括：超出时隐藏、重叠时隐藏、重叠时调整、不处理。

超出时隐藏效果：

重叠时隐藏效果：

重叠时调整效果：

不处理效果：

样式配置

• 显示范围： 可自定义配置Y轴或X轴刻度的最大值、最小值以及每个刻度之间的间隔；

支持动态值配置： 坐标轴由于数据是动态的，需要按动态的比例配置最大最小值。最大值、最小值中增加表达式配置，随着用户输入的值不同，坐标轴动态改变。 默认显示范围效果：

自定义动态值配置：

($dataSources.data_QUERY8_Bz3V.data ?? []).reduce((max, obj) => obj?.['激励结果'] > max ? obj?.['激励结果'] : max, -Infinity) * 1.2

($dataSources.data_QUERY8_Bz3V.data ?? []).reduce((min, obj) => obj?.['激励结果'] < min ? obj?.['激励结果'] : min, Infinity) * 0.8

其中：

• data_QUERY8_Bz3V为数据源编码；

• 激励结果为图表中值选择的字段；

• 1.2，0.8为想要显示的范围比例；

使用时按需求替换即可。

自定义动态值显示效果：

坐标轴最大最小值显示范围超出： 超出坐标轴的值会被强行压缩到坐标轴范围内。 未配置显示范围时效果如图：

配置了最大值/最小值，且存在超出配置范围的数据时，效果如下：

• 自动旋转刻度： 当轴刻度较多显示较拥挤时，我们可以勾选【自动旋转刻度】，此时刻度会旋转显示。

未勾选时效果：

勾选后效果：

• 自动缩略刻度： 当轴刻度较多显示较拥挤时，我们可以勾选【自动缩略刻度】，此时刻度会缩略显示。

未勾选时效果：

勾选后效果：

• 单位计算： 可对data的数据进行二次处理，例如单位计算设置为千，则data数据会除以1000后再渲染在图表中，此计算为纯前端计算， 不影响数据源的数据；

• 缩略轴： 当图表中数据量比较多，用户希望集中关注某个区域数据的时候，可拖动略轴的滑条进行查看；

• 小计项： 小计是瀑布图独有的功能，每个小计项是前面一系列柱子计算的结果，通过配置小计项可以实现一个图表放置多个瀑布图；

• 大小： 一般指图表中每个图的大小，可手动配置。在散点图中，大小也可以由data值决定（值越大，每一个圆点越大，反之越小）；

• 共享轴： 组合图特有配置，即多个不同的图形公共的轴；

图表数据配置

排序配置

2022和2023年计划标准成本与实际成本对比，然后按实际数从高到低排；

• 排序方式：嵌套；

• 排序目标：实际场景一般选配在轴上的文本列，此处为Year；

• 筛选依据：先选数据源里的列实际场景通常为颜色字段，此处为scenario，再选该列的成员Actual-实际数；

• 排序依据：data，可选降序、升序；

如图例，即要按实际数从大到小，排Year字段。

筛选配置

销售收入预实对比场景，我们可以按实际销售收入进行排序，筛选出销量前10的品类进行分析。 此时需要在图表数据配置中进行排序和筛选配置：

• 排序方式：按指定列；

• 排序依据：Actual，降序；

• 筛选依据：Actual；

• 筛选方式：前N项，10； 即按照实际数进行排序筛选，金额从大到小，筛选出销量前10的数据进行展示。