日程安排图小组件 (可应用主题)
简介
“日程安排图”小组件用于在混搭中显示日程安排图。
 | “日程安排图”小组件可在平台中用作标准小组件，也可用作 web 组件 (可从 SDK 导入)。 |
数据格式
日程安排图数据应该包含具有两个字段定义的信息表：
• 资源 - 用于定义要显示在资源轴上的资源。
• 数据 - 用于定义包含要针对每个资源显示的数据的嵌套信息表。
资源 | 数据信息表 | |
|---|---|---|
字段定义 | Resource:{name:'Resource',baseType:'STRING'} | Data:{name:'Data',baseType:'INFOTABLE'} |
作用 | 用于定义图表条形或列的 X 轴值。数据必须为字符串。每一行在 X 轴上显示为一个类别。为此列定义的名称是应该为 ResouceField 小组件属性选择的选项。 | 用于定义包含资源的数据的信息表。 |
基本类型 | STRING | INFOTABLE |
行示例 | Resource:'Apple' - 其中 Apple 为资源名称。 | Data:'Infotable1' - 包含资源数据的信息表实体。 |
对于在第一个信息表中定义的每个资源，您必须创建一个包含字段定义的信息表，其中的字段定义表示图表上资源的数据结构。下表列出了所需的数据结构和用于数据信息表的字段定义：
reason | info | start | end | color | |
|---|---|---|---|---|---|
字段定义 | reason:{name:'reason',baseType:'STRING'} | info:{name:'info',baseType:'STRING'} | start:{name:'start',baseType:'DATETIME'} | end:{name:'end',baseType:'DATETIME'} | color:{name:'color',baseType:'STRING'} |
作用 | 必填字段，用于定义任务名称或记录资源事件的原因。此列中的数据将显示为图表图例。 | 可选字段，用于定义资源事件说明。 | 必填字段，用于定义资源事件的开始日期。 | 必填字段，用于定义资源事件的结束日期。 | 可选字段，用于为图表中的事件表示定义特定颜色。 |
基本类型 | STRING | STRING | DATETIME | DATETIME | STRING |
行示例 | reason:'Maintenance' - 其中 Maintenance 是要显示在图表中的事件名称。 | info:'Maintenance event description' - 其中 Maintenance event description 是要显示在图表中的事件说明。 | start:'2020-01-07 03:57:43.322' - 维护事件的开始日期。 | end:'2020-01-26 07:38:12.102' - 维护事件的结束日期。 | color:'red' - 事件将以红色显示。 |
| | 信息表字段定义必须与上表中指定的名称相匹配。 |
每一行表示资源内某一事件或某一任务的时间或持续时间。下图显示了日程安排图的数据服务返回的数据格式：
对于间隔缩放控制选项，必须创建包含两个字段的信息表：标签和持续时间。这两个字段中的数据基本类型应为 STRING。下图显示了数据服务返回的数据格式：
可在 duration 字段中使用的值及其表示的范围如下所示：
• Y - 年
• M - 月
• W - 周
• d - 天
• h - 小时
• m - 分钟
• s - 秒
• ms - 毫秒
| | 字符区分大小写。例如，"M" 表示月份，"m" 表示分钟。 |
绑定数据源
要在图表中显示数据：
1. 在“数据”面板上添加数据服务，使其能够为小组件返回适当数据格式的信息表。
2. 将数据服务的 All Data 属性绑定到图表的 Data 属性。
3. 选择图表，然后在“属性”面板上设置以下属性：
◦ ResourceField - 选择要用于资源轴的信息表列。
◦ DataField - 选择包含每个资源数据的信息表列。每个字段都是一个内置信息表。
4. 相继单击“保存”和“查看混搭”。
信息表数据将显示在图表中。
添加次轴
可将次轴添加至日程安排图。次轴可用于以不同的格式或区域设置显示日期。要向图表添加次时间轴，请执行以下操作：
1. 选择图表，然后打开“属性”面板。
2. 选择 SecondTimeAxis 属性旁的复选框。随即将列出其他属性。
3. 要为次轴指定不同的日期格式，请为 SecondTimeAxisDateFormatToken 属性键入某一日期模式，或选择一个本地化标记。
4. 单击“保存”，然后单击“查看混搭”。
根据指定的格式日期显示次时间轴。
下图显示了带有次轴的日程安排图小组件：
图表显示了多个资源的事件。次时间轴和主时间轴可用于以两种不同的格式显示日期。主轴显示日期和月份，次轴显示周数。要使用周数显示日期格式，请将 SecondTimeAxisDateFormatToken 属性设置为 w。有关可用格式的详细信息，请参阅格式化小组件的日期和时间。
下表列出了可用于启用和配置次时间轴的属性：
属性 | 说明 | 基本类型 | 默认值 | 是否可绑定? (Y/N) | 本地化支持 |
|---|---|---|---|---|---|
SecondTimeAxis | 将次时间轴添加到图表中。 | BOOLEAN | False | Y | N |
SecondTimeAxisLabel | 用于指定次时间轴的文本标签。 | STRING | 次时间轴 | Y | Y |
SecondTimeAxisLabelAlignment | 用于对齐次时间轴的标签。默认情况下，标签与左侧对齐。 | STRING | 左 | N | N |
SecondTimeAxisDateFormatToken | 能够让您使用 "dd-mm-yy" 模式为次时间轴本地化日期格式。默认使用操作系统的日期格式。 | STRING | 不适用 | Y | Y |
小组件属性
下面列出了“日程安排图”小组件的属性。
属性名称 | 说明 | 基本类型 | 默认值 | 是否可绑定? (Y/N) | 是否可本地化? (Y/N) | ||
|---|---|---|---|---|---|---|---|
AxisZoom | 用于放大时间轴。 选择此属性时，DirectSelectionZoom、DragSelectionZoom、TimeAxisIntervalControl 和 TimeAxisRangeZoom 属性将出现在属性列表中。 | BOOLEAN | False | Y | N | ||
CustomClass | 用户定义的 CSS 类，应用于小组件顶层 div。 可以输入多个类，以空格作为分隔符。 | STRING | 不适用 | Y | N | ||
DirectSelectionZoom | 可通过选择图表中的两个数据项进行放大。 可用选项包括“无”、“资源轴”、“时间轴”和“两者”。 | STRING | 无 | Y | N | ||
DragSelectionZoom | 可通过在要查看的数据范围周围绘制一个选择框来放大图表的特定部分。 可用的选项包括“无”、“资源轴”、“时间轴”和“两者”。 | STRING | 无 | Y | N | ||
Data | 图表的信息表数据源。 | INFOTABLE | 不适用 | Y | N | ||
DataField | 选择包含图表资源时间数据的信息表字段。 | INFOTABLE | 不适用 | Y | N | ||
Disabled | 禁用混搭中的小组件。 小组件会在混搭中显示，但无法进行单击或将其选中。 | BOOLEAN | False | Y | N | ||
EmptyChartIcon | 用于指定：图表为空白时显示的图标。 | 媒体实体 | not visible | N | N | ||
EmptyChartLabel | 用于指定：图表为空白时显示的文本。 | STRING | [[ChartStateLabelEmpty]] | N | Y | ||
ErrorStateIcon | 用于指定：图表为空白时显示的图标。 | 媒体实体 | error | N | N | ||
ErrorStateLabel | 用于指定：图表为空白时显示的文本。 | STRING | N | Y | |||
LoadingIcon | 用于指定：加载图表数据时显示的图标。 | 媒体实体 | chart loading icon | N | N | ||
NoDataSourceIcon | 用于指定：图表未绑定到数据源时显示的图标。 | 媒体实体 | bind | N | N | ||
NoDataSourceLabel | 用于指定：图表未绑定到数据源时显示的文本。 | STRING | [[ChartStateLabelNoData]] | N | Y | ||
EndTime | 用于设置缩放范围结束处的日期和时间。 | DATETIME | 不适用 | Y | N | ||
ExternalPadding | 设置距离轴的填充。 填充是条宽度的百分比。 | NUMBER | 25 | Y | N | ||
HideDataTooltips | 隐藏悬停或选择图表中的数据点时显示的工具提示。 | BOOLEAN | False | N | N | ||
HideLegend | 隐藏图例区域。 选择此属性时，LegendAlignment、LegendFilter、LegendMarkerShapes、LegendMaxWidth 和 LegendPosition 属性不会显示在属性列表中。 | BOOLEAN | False | Y | N | ||
HideDataTooltips | 隐藏悬停或选择图表中的数据点时显示的工具提示。 | BOOLEAN | False | N | N | ||
HideNotes | 隐藏注解区域。 选择此属性时，Notes、NotesAlignment 和 NotesPosition 属性不会显示在属性列表中。 | BOOLEAN | False | Y | N | ||
HideResourcesAxis | 隐藏资源轴。 | BOOLEAN | False | Y | N | ||
HideTimeAxis | 隐藏时间轴。 | BOOLEAN | False | Y | N | ||
HorizontalAxisMaxHeight | 设置水平轴的最大高度。 | NUMBER | 85 | Y | N | ||
HorizontalAxisLabelsRotation | 设置标签在水平轴上的旋转角度。可输入 -180 到 180 之间的任意值。 | NUMBER | 自动大小 | N | N | ||
InternalPadding | 设置系列之间的填充。 填充是条宽度的百分比。 | NUMBER | 25 | Y | N | ||
Label | 显示日程安排图的文本标签。 | STRING | 日程安排图 | Y | Y | ||
LabelType | 将日程安排图的标签类型设置为“标题”、“子标题”、“标签”或“正文”。 | STRING | 子标题 | Y | N | ||
LabelAlignment | 按“左”、“居中”或“右”对齐“日程安排图”小组件的标签。 此属性的可用选项取决于 LabelPosition 属性的设置。 | STRING | 左 | N | N | ||
LabelPosition | 将标签的位置设置为“上”或“下”。 | STRING | 上 | N | N | ||
LabelReset | 设置显示在缩放控件重置按钮中的标签。 | STRING | 重置 | Y | Y | ||
LegendAlignment | 按“上”、“中”或“下”对齐图例文本。 此属性的可用选项取决于 LegendPosition 属性的设置。 | STRING | 上 | N | N | ||
LegendFilter | 添加图例筛选器，使用户能够在运行时筛选图表。 | BOOLEAN | False | N | N | ||
LegendMarkerShapes | 将数据系列图例的标记形状设置为“方形”、“圆形”或“无”。 | STRING | 方形 | N | N | ||
LegendMaxWidth | 设置图例区域的最大宽度。 | NUMBER | 736 | Y | N | ||
LegendPosition | 将图例的位置设置为“上”、“下”、“左”或“右”。 | STRING | 右 | N | N | ||
MultipleDataSources | 可用于在图表上显示来自多个源的数据。 选择此属性时，NumberOfDataSources 属性将出现在属性列表中。 | BOOLEAN | False | N | N | ||
Notes | 用于指定：图表的注解区域中显示的文本。可以输入字符串，也可以选择本地化标记。 | STRING | 不适用 | Y | Y | ||
NotesAlignment | 按“左”、“右”或“居中”对齐注解文本。 此属性的可用选项取决于 NotesPosition 属性的设置。 | STRING | 左 | N | N | ||
NotesPosition | 将注解区域的位置设置为“上”或“下”。 | STRING | 底部 | N | N | ||
NumberOfDataSources | 用于设置可绑定到图表的数据源的数量。 | NUMBER | 2 | N | N | ||
NumberOfReferenceLines | 指定要在图表上显示的参考线的数量。最多可以添加 24 条参考线。将添加每条参考线的附加属性。 | NUMBER | Y | N | N | ||
NumberOfTimeLabels | 设置要在时间轴上显示的标签数。
| NUMBER | N | Y | N | ||
ReferecneLineNLabel | 设置参考线的文本。 | STRING | Y | Y | N | ||
ReferecneLineNValue | 设置参考线的值。您可以选取一个日期来设置参考线。 | DATETIME | Y | N | 不适用 | ||
ResourcesAxisLabel | 显示资源轴的文本标签。 | STRING | 资源轴 | Y | Y | ||
ResourcesAxisLabelAlignment | 按“上”、“中”或“下”对齐资源轴标签。 | STRING | 居中 | N | N | ||
ReverseResourcesAxis | 逆序显示资源轴值。 | BOOLEAN | False | N | N | ||
ReverseTimeAxis | 逆序显示时间轴值。 | BOOLEAN | False | N | N | ||
RulersInFront | 在数据值前方显示标尺。默认情况下，标尺显示在数据后方。 | BOOLEAN | False | Y | N | ||
SeriesClicked | 单击数据点时会触发事件。 | 不适用 | 不适用 | Y | N | ||
ShowHideLegend | 添加了用于在运行时显示或隐藏图表图例的显示/隐藏按钮。 | BOOLEAN | False | N | N | ||
ShowResourcesAxisRuler | 显示资源轴标尺。 | BOOLEAN | False | Y | N | ||
ShowTimeAxisRuler | 显示时间轴标尺。 | BOOLEAN | False | Y | N | ||
ShowZoomButtons | 启用缩放后，在图表工具栏上显示放大和缩小按钮。 | BOOLEAN | False | N | N | ||
SparkView | 显示图表可视化的简化视图。启用此属性可隐藏标签、图例和标尺。 | BOOLEAN | False | Y | N | ||
StartTime | 用于设置缩放范围开始处的日期和时间。 | DATETIME | 不适用 | Y | N | ||
TabSequence | 按 TAB 键时显示的日程安排图小组件序号。 | NUMBER | 不适用 | N | N | ||
TimeAxisIntervalControl | 添加允许根据特定间隔放大时间轴的控件。 默认情况下，此属性的选择为“无”。选择“下拉列表”后，TimeAxisIntervalControlLabel、TimeAxisIntervalData、TimeAxisIntervalAnchorPoint 和 TimeAxisIntervalAnchorPointLabel 属性将出现在属性列表中。 | STRING | 无 | Y | N | ||
TimeAxisIntervalControlLabel | 指定时间轴间隔缩放控件的标签。 | STRING | 不适用 | Y | Y | ||
TimeAxisIntervalData | 间隔缩放控件选项的数据源。 从间隔下拉列表中选择一个条目时，图表将根据选定的持续时间值和开始/结束定位点进行缩放。 | INFOTABLE | 不适用 | Y | N | ||
TimeAxisIntervalAnchorPoint | 用于选择数据集内间隔范围的定位点。 选择“开始”可在数据集的起始处放置间隔，或者选择“结束”可在结束处放置间隔。 例如，如果在 12 个月的数据集中指定 3 个月的间隔，则可以选择“开始”来显示最初 3 个月，或选择“结束”来显示数据集的最后 3 个月。 | STRING | 开始 | Y | N | ||
TimeAxisIntervalAnchorPointLabel | 指定时间轴间隔定位点的标签。 | STRING | 不适用 | Y | Y | ||
TimeAxisLabelAlignment | 按“左”、“右”或“居中”对齐时间轴标签。 | STRING | 左 | N | N | ||
TimeAxisLabel | 显示时间轴的文本标签。 | STRING | 时间轴 | Y | Y | ||
TimeAxisDateFormatToken | 针对时间轴使用 DD-MM-YY 模式本地化日期格式。 | STRING | 不适用 | Y | Y | ||
TimeAxisRangeZoom | 添加用于在时间轴上指定日期和时间范围以进行放大的控件。您可以使用 StartTime 和 EndTime 属性设置范围。 选择此属性时，TimeAxisStartZoomLabel 和 TimeAxisEndZoomLabel 属性将显示在属性列表中。 | BOOLEAN | False | Y | N | ||
TimeAxisRangeZoomDateFormat | 使用 DD-MM-YY 格式本地化时间范围选择框的日期。所支持格式均基于 Moment.js JavaScript 库，且区分大小写。 | STRING | 不适用 | N | N | ||
TimeAxisRangeZoomDateWidth | 启用缩放后，设置水平轴上日期选择框的宽度。 | NUMBER | 332px | N | N | ||
TimeAxisStartZoomLabel | 用于指定范围选择的起始位置的标签。 | STRING | 不适用 | Y | Y | ||
TimeAxisEndZoomLabel | 用于指定范围选择的结束位置的标签。 | STRING | 不适用 | Y | Y | ||
VerticalAxisMaxWidth | 设置垂直轴的最大宽度。 | NUMBER | 85 | Y | N |