- SAP Managed Tags:
介绍
SAP 分析云（SAC）提供了强大的数据可视化和分析能力，除了其标准版的产品中提供的常见可视化图表类型，SAC还以自定义微件的形式支持用户开发自定义的可视化图表。甘特图在可视化时间线、依赖关系和资源分配方面被广泛使用，是有效的项目管理和调度中不可或缺的工具。本篇文章将会介绍SAC专家 Alexander开发的一个专为 SAC 用户设计的自定义甘特图微件。这个微件可以无缝集成到您的SAC环境中。
来自不同业务职能的SAP用户可以利用这个自定义微件来可视化众多用例，包括：
- 项目时间线
- 维护计划
- 生产计划
- 员工资源分配
- 版本管理
在本篇文章中，您将逐步了解如何在您的SAP Analytics Cloud环境中集成和配置这个甘特图自定义微件，从而有效地可视化和管理您的计划数据。
安装甘特图自定义微件
要将甘特图自定义微件集成到 SAP Analytics Cloud 环境，请执行以下步骤：
1.下载所需文件：从 GitHub 资源库下载 “UI5GanttChart.json”和 “UI5GanttChart.zip” 文件。
2.上传JSON定义文件：
- 登录到您的SAP Analytics Cloud。
- 导航到“故事”，并选择“自定义微件”选项卡。
- 点击“创建”，并上传您之前下载的 “UI5GanttChart.json”文件。
3.上载资源文件：
- 上传JSON文件后，点击出现的“选择文件”按钮。
- 选择并上传包含微件资源文件的 “UI5GanttChart.zip” 归档文件。
有关更多信息，请参阅官方 SAP Analytics Cloud 文档。
技术实现概述
甘特图自定义微件是基于标准的UI5 GanttChartWithTable 控件构建的。该微件的生成器（Builder）和样式设置（Styling）面板中展现了底层UI5控件的一些属性，允许您根据需要去自定义和调整可视化效果。然而，UI5 GanttChartWithTable 控件本身提供了许多额外的功能，其中许多尚未在当前的自定义微件中实现。这为未来的改进和功能增强提供了巨大的机会。关于技术实现的详细讨论将在单独的博客文章中进行。
自定义微件的数据绑定
甘特图自定义微件并不使用标准的SAP Analytics Cloud（SAC）数据绑定功能，例如表格或图表微件所支持的那种。相反，它提供了一个名为“setDataSet”的API方法，该方法接受 ResultSet 数组类型的一个参数。您可以通过从标准的SAC表格微件中检索数据来轻松获取这个数据数组。具体来说，调用表格微件的“getDataSource().getResultSet()”方法，然后将结果直接传递给自定义微件，代码如下：
var tasksResultSet = Table_Tasks.getDataSource().getResultSet();
GanttChart_1.setDataSet(tasksResultSet); 这种方法要求您使用一个标准的表格来检索必要的数据，即使这个表格对用户不可见。建议您在表格的“onResultChanged”事件处理器中实现提供的代码片段。这样，每当表格数据发生变化（例如，应用了新的过滤条件）时，甘特图微件会自动更新。
利用这种方法，数据在设计模式（设计时）下不会在甘特图中显示。
此外，自定义微件还需要理解如何从“ResultSet”中提取信息。因此，需要通过微件生成器面板中的“Dataset Parsing Settings”部分，将所需字段映射到“ResultSet”中对应的元素。
要检查您的“ResultSet”结构，可以使用以下脚本将其记录到控制台中：
console.log(tasksResultSet); 以下是一个“ResultSet”可能的结构示例：
[
{
"@MeasureDimension": {
"id": "DUMMY",
"description": "DUMMY",
"rawValue": "1",
"formattedValue": "1"
},
"ID": {
"id": "1",
"description": "1",
"properties": {}
},
"Name": {
"id": "Phase 1",
"description": "Phase 1",
"properties": {}
},
"Description": {
"id": "Initial phase of the project",
"description": "Initial phase of the project",
"properties": {}
},
"Start_Datetime": {
"id": "2025-01-01 08:00:00.0000000",
"description": "Jan 1, 2025 8:00:00",
"properties": {}
},
"End_Datetime": {
"id": "2025-03-31 18:00:00.0000000",
"description": "Mar 31, 2025 18:00:00",
"properties": {}
},
"Parent_ID": {
"id": "",
"description": "",
"properties": {}
},
"Color": {
"id": "#3357FF",
"description": "#3357FF",
"properties": {}
}
},
{
"@MeasureDimension": {
"id": "DUMMY",
"description": "DUMMY",
"rawValue": "1",
"formattedValue": "1"
},
"ID": {
"id": "5",
"description": "5",
"properties": {}
},
"Name": {
"id": "Task 1.1",
"description": "Task 1.1",
"properties": {}
},
"Description": {
"id": "Research and planning",
"description": "Research and planning",
"properties": {}
},
"Start_Datetime": {
"id": "2025-01-05 09:00:00.0000000",
"description": "Jan 5, 2025 9:00:00",
"properties": {}
},
"End_Datetime": {
"id": "2025-01-25 17:00:00.0000000",
"description": "Jan 25, 2025 17:00:00",
"properties": {}
},
"Parent_ID": {
"id": "1",
"description": "1",
"properties": {}
},
"Color": {
"id": "#3357FF",
"description": "#3357FF",
"properties": {}
}
},
...
] 以及在生成器面板中对应的设置：
在“ResultSet”中，可以通过以下方式引用值：
- “Name.id”：使用对应维的ID
- “Name.description”：使用对应维的说明
- “Name”：等同于“Name.id”
以下是配置甘特图自定义微件数据集解析所需的每个字段的概述：
- Event ID：甘特图上每个甘特条的唯一标识符。
- Event Name：直接显示在甘特条上的文本内容。
- Event Description（可选）：鼠标悬停在甘特条上时显示为工具提示的文本内容。
- Event Start Time, Event End Time：定义甘特图甘特条的开始时间和结束时间。
- Parent ID（可选）：允许将甘特条组织为两级结构。此字段应引用父级甘特条的Event ID。
- Color of Event Bar（可选）：用于定义甘特图上相应甘特条颜色的十六进制颜色代码。
其他设置
甘特图自定义微件提供了其他的的配置选项，用于微调其外观和行为。这些设置可以在微件的生成器面板中找到。与样式相关的设置将在单独的部分中介绍。
时区设置（Time Zone Settings）
- 数据集时区偏移（UTC ± X）[Dataset Timezone Offset from UTC (UTC ± X)]：如果该值不为零，则开始时间和结束时间将从指定的偏移量转换为UTC。此设置还可用于直观地按定义的小时数推移甘特图。
时间范围设置（Horizon Settings）
总时间范围（Total Horizon）定义了在甘特图中可见的完整时间框架。它可以是固定的，也可以是动态的：
- 如果禁用了动态总时间范围（Dynamic Total Horizon），则时间范围的边界由开始时间（Start Time）和结束时间（End Time）属性中设置的值定义。
- 如果启用了动态总时间范围（Dynamic Total Horizon），则时间范围将基于当前日期和时间计算，使用指定的分钟数向前和向后查看（回溯（Look Back）和前瞻（Look Forward）属性）。
可见时间范围（Visual Horizon）定义了总时间范围内最初对用户可见的部分。
- 如果启用了动态可见时间范围（Dynamic Visual Horizon），则会自动计算其时间边界，以确保数据集中的所有甘特条默认情况下都包含在图表区域内并可见。
- 否则，可见时间范围将与总时间范围相同。
显示模式（Display Mode）
- 紧凑显示模式（Compact Representation）：启用后，具有相同名称的所有甘特条将显示在同一行中，同时仍保留唯一的ID值。这特别适用于可视化周期性事件或分组任务。如果禁用，即使多个甘特条共享相同的名称，每个甘特条也仍会在自己的行中显示。
紧凑显示
表格设置（Table Settings）
- 表格列（Table Columns）：此属性定义甘特图表格部分（左侧窗格）中显示的列。它要求一个JSON对象数组，每个对象指定一个列，并包含两个必需的属性：
field：引用数据集中的维，方法与解析设置（Parsing Settings）相同。（可以是id或description）
label：在表格标题中显示的名称。
示例：
[
{
"field": "Name",
"label": "Tasks"
},
{
"field": "Description",
"label": "Description"
},
{
"field": "Start_Datetime.description",
"label": "Start"
},
{
"field": "End_Datetime.description",
"label": "End"
}
] 甘特图样式设置
甘特图自定义微件提供了多种可视化自定义选项，这些选项位于微件的“样式设置”面板中。通过这些设置，您可以控制统计图表的栏和标签的外观，从而提高可读性并符合视觉设计标准。
为所有甘特条应用相同颜色（Apply Same Color for All Bars）
- 此设置允许用户为图表中的所有甘特条定义统一的颜色。
- 它接受一个十六进制颜色代码（例如：#3498DB ）。
- 应用后，此处定义的颜色将覆盖数据集中提供的颜色值。
自动文本颜色（Automatic Text Color）
- 一个复选框，启用后会根据甘特条的颜色自动选择白色或黑色文本，以确保可读性。
- 当甘特条颜色不同且必须保留文本对比度时，此选项非常有用。
固定文本颜色（Fixed Text Color）
- 当“自动文本颜色（Automatic Text Color）”禁用时，此字段才有效。
- 用户可以手动定义一个十六进制颜色代码，将其用于所有甘特条的文本标签。
甘特条不透明度（Bars Opacity）
- 定义甘特条的透明度级别。默认值为0.8。
- 接受一个介于0（完全透明）到1（完全不透明）之间的数值。
总结
SAP Analytics Cloud的甘特图自定义微件在SAC故事和应用程序中直接提供直观且灵活的时间线表示，满足了一些用户对于自定义微件的需求。它支持层级结构、动态时间范围以及广泛的自定义选项，能够无缝集成到各种计划和报告场景中。
通过遵循本文中介绍的设置和配置步骤，您可以轻松地将该微件集成到您的仪表盘中。
后续文章将涵盖更多的增强功能和技术实现细节。欢迎大家提出反馈和建议，请随时评论，帮助我们共同塑造这一自定义可视化的未来。
原文作者：Alexander
