Question

在Thingsboard中，如何将动态字符和颜色用作时间序列中的点，同时将不同序列中的数据用作参数？

我要实现的是这样的历史风速和风向图组合：

我有两个数据源：

以公里/小时为单位的风速
以度为单位的风向（0为北，180为南）

颜色基于风速并通过静态规则计算（例如，高于30 km / h时将显示为红色）

Answer 1

据我所知，使用记事板图表（TbFlot）无法做到这一点。它们似乎充当了小部件配置和underlying chart-library called Flot之间的（非常方便的）粘合剂。

但是，您可以直接从窗口小部件使用flot库！只需致电

$.plot(self.ctx.$container, [[[0,0], [1,1], [2,1]]]);

绘制图表。

我偶然在flot documentation about customizing the data series中添加了一些代码，并想出了一些办法使其可以用作东西板小部件：

self.onInit = function() {
    let counter, f_drawCross, flotOptions;

    counter = 0;

    f_drawCross = function(ctx, x, y, radius, shadow) {
        var size = radius * Math.sqrt(Math.PI) * 2;

        if (shadow) {
            return;
        }

        if (++counter % 2) {
            ctx.moveTo(x - size, y);
            ctx.lineTo(x + size, y);
            ctx.moveTo(x, y + size);
            ctx.lineTo(x, y - size);
        }
        else {
            ctx.moveTo(x - size, y - size);
            ctx.lineTo(x + size, y + size);
            ctx.moveTo(x - size, y + size);
            ctx.lineTo(x + size, y - size);
        }
    };

    flotOptions = {
        series: {
            lines: { show: true },
            points: {
                show: true,
                symbol: f_drawCross
            }
        }
    };

    $.plot(self.ctx.$container, [[[0,0], [1,1], [2,1]]], flotOptions);
};

它将在您的小部件容器中创建一个图表，并绘制（交替）十字作为数据点。我认为您将需要某种计数器/索引，以使绘图方法可以访问正在绘制的当前数据点的值。

带有动态点（风速和风向）的图表

1 个答案: