Диаграмма с динамическими точками (объединенная скорость и направление ветра)

Question

На доске вещей (как) можно использовать динамический символ и цвет в качестве точек во временном ряду при использовании данных из другого ряда в качестве параметров?

Чего я пытаюсь добиться, так это комбинированного историческогодиаграмма скорости и направления ветра, например:

У меня есть два источника данных:

• Скорость ветра в км / ч
• Направление ветра в градусах (0 на север, 180 на юг)

Цвет основан на скорости ветра и рассчитывается по статическому правилу (например, выше 30 км / ч отображается вкрасный)

Answer 1

Насколько я могу судить, это невозможно с диаграммами вещей (TbFlot).Похоже, они действуют как (очень удобный) связующий элемент между конфигурацией виджета и базовой библиотекой диаграмм с именем Flot .

Однако вы можете использовать библиотеку flot непосредственно из ваших виджетов.!Просто позвоните

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

, чтобы нарисовать диаграмму.

Я наткнулся на некоторый код в документации flot о настройке ряда данных и придумал это, чтобы сделать егоработать в качестве виджета на доске вещей:

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);
};

Он создает диаграмму в контейнере виджета и рисует (чередует) кресты в качестве точек данных.Я думаю, вам понадобится какой-нибудь счетчик / индекс, чтобы метод рисования мог получить доступ к значениям текущей точки данных, которую он рисует.