Javascript 在Thingsboard中，我们可以使用单个数字仪表小部件来显示来自4个设备的数据吗

]

我已经在设备类型上创建了一个实体别名（假设有4个类型为Light Sensors的设备），是否可以复制Thingsboard的Digital Gauge Widget并创建一个新的Widget并修改它，以便它可以显示来自4个设备或n个设备的数据（根据数据源数组的长度动态创建仪表）。？

是的，我们可以：）

对于gauge小部件，thingsboard使用名为

TbCanvasDigitalGauge

的辅助对象。 这个东西将

widgetContext.data[0]

的度量值绘制到现有的画布元素上

基于一个现有的仪表小部件和

TbCanvasDigitalGauge

的代码，我为每个仪表设置了一个假上下文，以反映每个已解析的实体。因此，每个问题的数据都得到了解决 实体映射到每个仪表的

fakeCtx.data[0]

这是我的multi-gauge小部件的javascript部分：

self.createGauge = function(data, idx) {
    let elementId, canvas, fakeCtx;

    elementId = ['gauge', self.ctx.$scope.$id, idx].join('_');

    // Canvas for the gauge.
    canvas    = document.createElement('CANVAS');
    canvas.id = elementId;
    self.ctx.$container.append(canvas);

    // Fake context for the gauge helper object.
    fakeCtx = {
        $container: self.ctx.$container,
          settings: self.ctx.settings,
              data: [data],
          decimals: self.ctx.decimals,
             units: self.ctx.units,
          isMobile: self.ctx.isMobile,
            $scope: self.ctx.$scope,
             width: self.ctx.width,
            height: self.ctx.height
    };

    return new TbCanvasDigitalGauge(fakeCtx, elementId);
};

self.onInit = function() {
    // Create a gauge for each resolved entity.
    self.ctx.$scope.gauges = self.ctx.defaultSubscription.data.map(self.createGauge);
};

self.onDataUpdated = function() {
    self.ctx.$scope.gauges.forEach(gauge => gauge.update());
};

self.onResize = function() {
    self.ctx.$scope.gauges.forEach(gauge => gauge.resize());
};

self.getSettingsSchema = function() {
    return TbCanvasDigitalGauge.settingsSchema;
};

self.typeParameters = function() {
    return {
        maxDatasources: 1,
        maxDataKeys: 1
    };
};

self.onMobileModeChanged = function() {
    self.ctx.$scope.gauges.forEach(gauge => gauge.mobileModeChanged());
};

小部件的html是空的，因为脚本动态创建画布元素。

效果很好：）唯一的事情是，我必须编辑

maxDatasources

，使其能够从多个实体接收数据。如果要显示每个数据源中的多个键，还可以编辑

maxDataKeys