Как создать дашборд типа Bubble

> Медиадисплей > Редактор > Информационная панель
Дата обновления: 10 сентября 2024 г. Дата публикации: 9 сентября 2024 г. Автор: Жамсуев Очир

Задача

Cоздать дашборд типа Bubble, как на скриншоте

Порядок действий

1. Нажимаем добавить компонент, выбираем “Информационная панель”
   
2. Вводим название, это название будет использоваться для запросов, нажимаем “Добавить”
   
3. Настраиваем тип дашборда, выбираем Bubble
   
4. Настраиваем цвет шрифта
   
5. Настроим фон дашборда, для этого можно настроить цвет фона, либо градиент фона, настроим градиент, выберем верхний и нижний цвет
   
6. Настройка отображения значений и настройка анимации, включает анимацию дашборда
   

Запрос

{
    "Receivers": [
        "d1"
    ],
    "Containers": [
        {
            "Name": "Charts",
            "Text": [
                {
                    "dashboard": "d1", //Название
                    "series": [
                        {
                            "name": "Bubble1",
                            "data": [
                                [
                                    20,
                                    12,
                                    22
                                ],
                                [
                                    23,
                                    2,
                                    46
                                ],
                                [
                                    12,
                                    21,
                                    34
                                ],
                                [
                                    3,
                                    2,
                                    100
                                ],
                                [
                                    45,
                                    53,
                                    87
                                ]
                            ] //[x, y, размер]
                        },
                        {
                            "name": "Bubble2",
                            "data": [
                                [
                                    59,
                                    31,
                                    59
                                ],
                                [
                                    48,
                                    74,
                                    76
                                ],
                                [
                                    71,
                                    67,
                                    56
                                ],
                                [
                                    70,
                                    72,
                                    87
                                ],
                                [
                                    58,
                                    96,
                                    97
                                ]
                            ]
                        },
                        {
                            "name": "Bubble3",
                            "data": [
                                [
                                    35,
                                    53,
                                    88
                                ],
                                [
                                    40,
                                    65,
                                    45
                                ],
                                [
                                    62,
                                    90,
                                    85
                                ],
                                [
                                    38,
                                    82,
                                    86
                                ],
                                [
                                    43,
                                    80,
                                    81
                                ]
                            ]
                        },
                        {
                            "name": "Bubble4",
                            "data": [
                                [
                                    50,
                                    64,
                                    66
                                ],
                                [
                                    30,
                                    52,
                                    64
                                ],
                                [
                                    77,
                                    61,
                                    44
                                ],
                                [
                                    38,
                                    23,
                                    95
                                ],
                                [
                                    52,
                                    83,
                                    83
                                ]
                            ]
                        }
                    ]
                }
            ]
        }
    ]
}

Результат