thingsboard修改仪表盘
时间: 2025-05-28 10:37:43 浏览: 14
### 如何在 ThingsBoard 中编辑或自定义仪表盘
在 ThingsBoard 平台中,仪表盘的编辑和自定义功能非常强大,允许用户根据需求调整界面布局、添加新的仪表板以及配置各种小部件的行为。以下是关于如何实现这些目标的具体说明。
#### 编辑现有仪表盘
当用户打开一个已有的仪表盘时,默认情况下可以直接对其进行编辑[^1]。如果需要更改当前仪表盘的状态或者结构,可以在顶部工具栏找到相应的选项按钮。例如,“+”号用于新增附属仪表板;而通过点击右上角的齿轮图标,则能够访问更高级别的 **布局管理设置** 功能。
对于具体的控件定制方面,比如图例显示等内容,官方文档提供了详细的指导案例。像在HTML文件`ui-ngx/src/app/modules/home/components/widget/legend-config-panel.component.html`里加入额外的选择框代码片段就可以让用户自由决定是否展示最大值(Max)或是差值(Delta)[^2]:
```html
<mat-checkbox formControlName="showMax"> {{ 'legend.show-max' | translate }} </mat-checkbox>
<!-- 增加下面 mat-checkbox 全部 -->
<mat-checkbox formControlName="showDelta"> {{ 'legend.show-delta' | translate }} </mat-checkbox>
```
#### 创建并保存新仪表板
除了对已有页面做改动外,还支持构建全新的子级关联视图。新建过程中需指定该板块的名字,并由系统自动分配唯一ID编号(当然也允许手动输入),尽管后者实际用途尚不明确[^1]。值得注意的是,虽然独立完成初步设定后可即时预览效果,但最终确认仍得返回至主面板执行统一存储指令才行。
另外值得一提的是,在设计阶段赋予各个模块交互逻辑至关重要——这通常涉及到调用特定 JavaScript 方法来处理来自 `defaultSubscription` 属性的时间序列数据流以及其他动态参数传递过程[^3]。举个例子来说,如果我们打算绘制一条基于时间轴变化趋势曲线的话,可能就需要借助第三方图形渲染库 Chart.js 来达成预期视觉呈现目的[^4]:
```javascript
// 初始化图表实例
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: [], // 这里填充具体日期标签数组
datasets: [{
label: '# of Votes',
data: [], // 对应数值集合
borderColor: 'rgba(75, 192, 192, 1)',
borderWidth: 1
}]
},
options: {
scales: {
xAxes: [{
type: 'time', // 设置X轴为时间类型
time: {
unit: 'day'
}
}],
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
```
以上脚本展示了怎样利用 Chart.js 构建简单的折线型统计报告样式。
阅读全文
相关推荐


















