热力图日历部件以逐日明细展示一年内指标变化概览。
单字段配置
将所需指标加入 Value 区域，点击构建报告。可添加遥测、状态或字段计算。
日历中每个单元格的颜色由当天数值决定，无值时单元格为空白。 可在视图设置中更改颜色方案。
多字段
可在 Value 区域添加多个字段，此时可通过单选按钮切换显示的字段。
选择日期操作
Trendz 日历视图支持日期点击事件，适用于选择感兴趣日期并进一步下钻分析。
例如在 ThingsBoard 中创建包含多个部件的仪表板，所有部件使用仪表板的时间范围。 通过配置日历部件上的日期点击事件，可设置仪表板的时间范围，使其他部件自动更新并显示所选日期的数据。
- 在 ThingsBoard 仪表板上添加 Trendz 日历视图；
- 打开部件编辑模式，切换到操作选项卡；
- 点击添加操作按钮；
- 在操作来源中选择 date-selected；
- 在类型中选择自定义操作，使用下列函数。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
var newTimeRange = {
aggregation: {
limit: 30000,
type: "NONE"
},
hideAggInterval: false,
hideAggregation: false,
hideInterval: false,
history: {
historyType: 1,
fixedTimewindow: {
startTimeMs: additionalParams.startTs,
endTimeMs: additionalParams.endTs
}
},
selectedTab: 1
}
// apply new time range
widgetContext.dashboard.dashboardTimewindowChangedSubject.next(newTimeRange);
var params = {
entityId: entityId,
entityName: entityName,
entityLabel: entityLabel,
}
// open new dashboard state
widgetContext.stateController.updateState('consumption_details', additionalParams.params);
通过此自定义操作可将仪表板时间范围改为所选日期，并导航到名为 consumption_details 的新仪表板状态。
切换字段操作
当 Value 区域添加了多个字段时，会激活切换字段选择器，用户可从部件中选择要显示的字段。 Trendz 视图在用户切换字段时触发特殊事件，可在切换事件触发时执行所需操作。
- 在 ThingsBoard 仪表板上添加 Trendz 日历视图；
- 打开部件编辑模式，切换到操作选项卡；
- 点击添加操作按钮；
- 在操作来源中选择 changed-radio-button；
- 按标准部件操作配置。
所选字段名称在 additionalParams.radioButton 属性中。